AngularJS、BootstrapUI：切换按钮

Question

我有一个 javascript 个对象的列表，我对其进行了 ng-repeat。

我从 UI-Bootstrap.

中将每个按钮关联到一个切换按钮

我希望根据我的 javascript 模型中的值来切换切换按钮。

var app = angular.module('App', []);
app.controller('Ctrl', function($scope) {
    $scope.list = [{a : '10'},
                  {a : '20'},
                  {a : '42'}];

});

<div ng-repeat="data in list">
      {{data.a}}      <button type="button" class="btn btn-primary" ng-model="data.state" btn-checkbox="">TEST</button>
</div>

http://plnkr.co/edit/JcnzNSKhy68dXtGHlXLe?p=preview

例如，在这种情况下，我希望与 a = 42 关联的按钮已经切换

编辑：列表中的数据是从 GET 请求中获取的，所以我不能静态写入它

Answer 1

我不确定这是否正是您要查找的内容，但您可以将 ng-click 添加到按钮：

<button type="button" class="btn"
    ng-class="{'btn-primary': data.state}"
    ng-model="data.state"
    ng-click="data.state = !data.state">
        TEST
</button>

编辑

您可以在控制器中设置状态：

var app = angular.module('App', []);
app.controller('Ctrl', function() {
    var _this = this;
    _this.list = [{a : '10'},
                  {a : '20'},
                  {a : '42'}];

    var i;
    for (i = 0; i < _this.list.length; i++) {
      if (_this.list[i].a == 42) {
        _this.list[i].state = true;
      }
    }  
});

http://plnkr.co/edit/C8NW5h4pzfzBxrCSntDs?p=preview

Answer 2

虽然上述答案有效，但我认为更 Angular 的方法是使用指令。而且它是一个较少的属性来解释。

html

<button class="btn" nx-toggle ng-model="data.state">toggle</button>

javascript

app.directive('nxToggle', function() {

    return {
      restrict: 'A',
      require: 'ngModel',
      link: function($scope, elem, attrs, ngModel) {
        $scope.$watch(function() {
          return ngModel.$modelValue
        }, function(val) {
          if (val == true)
            elem.addClass('btn-primary')
          else
            elem.removeClass('btn-primary')
        })

        elem.bind('click', function() {
          $scope.$apply(function() {
            if (ngModel.$modelValue == true)
              ngModel.$setViewValue(false)

            else
              ngModel.$setViewValue(true)
          })
        }) 
      }
    }
  })

http://plnkr.co/edit/bq4roWHUUlaBnj5xr31Z?p=preview

AngularJS、BootstrapUI：切换按钮

AngularJS, BootstrapUI : Toggle a button

angularjs

angular-ui-bootstrap

html

javascript