AngularJS,BootstrapUI:切换按钮

时间:2015-09-01 16:09:19

标签: angularjs angular-ui-bootstrap

我有一个javascript对象列表,我会对其进行重复操作。

我将每个人与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请求中获取的,因此我无法静态编写

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

虽然上面的答案有效,但我认为更多的 Angular 方法是使用指令。并且这是一个较少的属性。

HTML

settings = webView.getSettings();

String userAgent = settings.getUserAgentString();

if (!settings.getUserAgentString().contains("customAgent")) {
    PackageManager packageManager = this.cordova.getActivity().getPackageManager();
    double versionCode;

    try {
        versionCode = packageManager.getPackageInfo(this.cordova.getActivity().getPackageName(), 0).versionCode;
    } catch (PackageManager.NameNotFoundException e) {
        versionCode = 1.0;
    }

    userAgent += " customAgent/" + CordovaWebView.CORDOVA_VERSION + " customAgent/" + versionCode + " (233)";
    settings.setUserAgentString(userAgent);

}

的javascript

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

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