Question

在我的应用程序中，我有颜色数组，我想创建一个带复选框的颜色列表。

var app = angular.module('app',[]);
app.controller('mainCtrl',function($scope){
  $scope.colors = ['red','blue','green','yellow'];
});

所以我创建一个ng-repeat来创建一个列表：

<body ng-controller="mainCtrl">
 <ul>
  <li ng-repeat="c in colors">
  <input type="checkbox" ng ng-true-value="{{c}}" ng-false-value=""/> {{c}}
  </li>
 </ul>
</body>

现在我需要将每个复选框的ng-model绑定到类似f.tags.red或f.tags.blue的内容，因此我将代码更改为以下内容：

  <li ng-repeat="c in colors">
     <input type="checkbox" ng-model="f.col.{{c}}" ng-true-value="{{c}}" ng-false-value=""/> {{c}}
</li>

但是这会让我的应用程序损坏。所以要为ng-model和ng-true-value修复此问题，我也会创建此jsbin。感谢

Answer 1

这里有一些问题。通常，Angular的内部属性需要expressions（检查文档），您不应该使用{{x}}，而应仅使用x本身。所以，您ng-model不应该是f.col.{{c}}而是f.col.blue和f.col.red等等。现在，在javascript中，执行a.b和a['b']是相同的，所以在这种情况下，由于c是一个字符串，因此正确的模型是f.col[c]。同样适用于true-value，它也应该只是c。

最后，为了使示例正常工作，您需要实际创建维护模型的对象（在本例中为$scope.f.col。）可以在此处查看工作示例：http://jsbin.com/citupepa/1/edit

Answer 2

以下是选择颜色的工作演示： jsbin

<ul>
<li ng-repeat="c in colors">
  <input type="checkbox" ng-model="f.col[c]" ng-true-value="true" ng-false-value="false"/> {{c}}
</li>

选定的颜色：{{f.col}}

绑定ng-model的一部分，其范围为angularjs

2 个答案: