在angularjs中用scope绑定ng-model的一部分

Bind part of ng-model with scope in angularjs

本文关键字：ng-model 一部分 绑定 scope angularjs 中用      更新时间：2023-09-26

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

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。由于

这里有一些地方出了问题。一般来说，在使用expressions的Angular属性中，你不应该使用{{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

下面是选择颜色的工作演示: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}}

相关文章：