在按钮上切换课程(选择/取消选择)

Rex_C

我正在使用ng-repeat从数据动态创建按钮。一次只能单击一个按钮。我现在想做的是能够取消选择一个单击的按钮,但是还可以根据按钮是否被单击来更改按钮的类。我试图用下面的代码实现这一点,但是显然不能正常工作。我的JavaScript并不是最强的,所以我希望有人能给我一点帮助。谢谢。

<div class="form-horizontal" data-ng-repeat="item in schedule.Events">
    <div class="form-group">
        <div class="col-xs-12 col-md-6 col-lg-6">
            <button type="button" class="btn form-control"
                    data-ng-class="[pickChosen == 1 ? 'btn-success' : 'btn-default']"
                    data-ng-click="pickChosen = buttonToggle(1);">
            </button>
        </div>
        <div class="col-xs-12 col-md-6 col-lg-6">
            <button type="button" class="btn form-control"
                    data-ng-class="[pickChosen == 2 ? 'btn-success' : 'btn-default']"
                    data-ng-click="pickChosen = buttonToggle(2);">
            </button>
        </div>
    </div>
</div>

角度代码:

.controller('dashController', function ($scope, $http) { 
    $scope.buttonToggle = function(buttonNumber) {
        if (pickChosen == 0) {
            pickChosen = buttonNumber;
        } else {
            pickChosen = 0;
        }
    }
})
dfsq

您的代码几乎可以了。只是一件事。对于ngClick remove分配部分,它应该看起来像:

data-ng-click="buttonToggle(1);"

然后在控制器中pickChosen使用this关键字引用当前作用域

$scope.buttonToggle = function(buttonNumber) {
    this.pickChosen = buttonNumber === this.pickChosen ? 0 : buttonNumber;
}

演示:http//plnkr.co/edit/JyoBvFOcT9sQYIJVIJyn

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

添加切换以选择:bootstrap

来自分类Dev

切换导航抽屉在按钮/图像上“打开”

来自分类Dev

如果选择了单选按钮,则切换表单字段的可见性

来自分类Dev

在按钮上单击选择tableViewCell

来自分类Dev

AngularJS在用户选择上切换CSS主题

来自分类Dev

使用基因敲除.js基于选择下拉菜单切换按钮状态

来自分类Dev

延迟切换课程

来自分类Dev

量角器-如何验证是否已选择/启用切换按钮?

来自分类Dev

jQuery从多个选择中切换

来自分类Dev

ng-change事件第一次不起作用,选择了切换按钮以取消选择

来自分类Dev

切换Google Analytics(分析)-选择退出/选择加入

来自分类Dev

切换按钮在Android上不切换

来自分类Dev

AngularJS类在按钮上切换

来自分类Dev

在按钮单击上切换输入

来自分类Dev

切换按钮字体颜色和drawableft选择器

来自分类Dev

用jQuery在按钮之间切换

来自分类Dev

Flutter-自定义切换按钮选择

来自分类Dev

切换数组中的UIbutton以选择/取消选择

来自分类Dev

单击侦听器上的单选按钮仅在选择切换按钮后才能工作

来自分类Dev

jQuery切换按钮使用.siblings取消选择

来自分类Dev

切换按钮并选择框

来自分类Dev

jQuery:悬停并单击时,在按钮上切换具有相同特性的类

来自分类Dev

切换Google Analytics(分析)-选择退出/选择加入

来自分类Dev

根据选择在变量之间切换

来自分类Dev

需要使用兄弟姐妹选择器切换/删除课程

来自分类Dev

新手jQuery切换/隐藏/显示在按钮上

来自分类Dev

禁用切换按钮选择颜色

来自分类Dev

选择和取消选择 certian 单选按钮时切换元素可见性

来自分类Dev

全选 | 使用切换按钮取消选择所有复选框

Related 相关文章

热门标签

归档