Fatal编程技术网
  • javascript/
  • Javascript 将ng模型的一部分绑定到angularjs中的范围

Javascript 将ng模型的一部分绑定到angularjs中的范围

javascript angularjs

Javascript 将ng模型的一部分绑定到angularjs中的范围,javascript,angularjs,angularjs-scope,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Scope,Angularjs Ng Repeat,在我的应用程序中，我有一个颜色数组，我想创建一个带有复选框的颜色列表 var app = angular.module('app',[]); app.controller('mainCtrl',function($scope){ $scope.colors = ['red','blue','green','yellow']; }); 因此，我创建了一个ng repeat来创建一个列表： <body ng-controller="mainCtrl"> <ul>

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

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
和
ng true value
的问题，我也创建了这个。
谢谢这里出了点问题。一般来说，在接受
表达式的Angular属性内部（检查文档），不应该使用
{{x}}
，而应该只使用
x
本身。因此，您的
ng模型不应该是
f.col.{c}
，而是
f.col.blue
和
f.col.red
等。现在，在javascript中，执行
a.b
和
a['b']
是相同的，因此在这种情况下，由于
c
是字符串，正确的模型是
f.col[c]
。对于
真值
，也应该是
c


最后，要使示例正常工作，您需要实际创建维护模型的对象（在本例中为
$scope.f.col
。可以在此处看到工作示例：
这里出现了一些问题。通常，在使用
表达式的角度属性内部（检查文档），您不应该使用
{x}}
，而只是
x
本身。因此，您的
ng模型不应该是
f.col.{c}
，而是
f.col.blue
和
f.col.red
等。现在，在javascript中，执行
a.b
和
a['b']
是相同的，因此在本例中，由于
c
是一个字符串，因此正确的模型是
f.col[c]
。对于
真值
，也应该是
c


最后，要使示例正常工作，您需要实际创建维护模型的对象（在本例中为
$scope.f.col
。可以在此处看到工作示例：
这里出现了一些问题。通常，在使用
表达式的角度属性内部（检查文档），您不应该使用
{x}}
，而只是
x
本身。因此，您的
ng模型不应该是
f.col.{c}
，而是
f.col.blue
和
f.col.red
等。现在，在javascript中，执行
a.b
和
a['b']
是相同的，因此在本例中，由于
c
是一个字符串，因此正确的模型是
f.col[c]
。对于
真值
，也应该是
c


最后，要使示例正常工作，您需要实际创建维护模型的对象（在本例中为
$scope.f.col
。可以在此处看到工作示例：
这里出现了一些问题。通常，在使用
表达式的角度属性内部（检查文档），您不应该使用
{x}}
，而只是
x
本身。因此，您的
ng模型不应该是
f.col.{c}
，而是
f.col.blue
和
f.col.red
等。现在，在javascript中，执行
a.b
和
a['b']
是相同的，因此在本例中，由于
c
是一个字符串，因此正确的模型是
f.col[c]
。对于
真值
，也应该是
c


最后，要使示例正常工作，您需要实际创建维护模型的对象（在本例中为
$scope.f.col
。可以在此处看到工作示例：
这里是颜色选择的工作演示：



    

  • 
{{c}}

    • 




选择的颜色：{{f.col}
这里是选择颜色的工作演示：



    

  • 
{{c}}

    • 




选择的颜色：{{f.col}
这里是选择颜色的工作演示：



    

  • 
{{c}}

    • 




选择的颜色：{{f.col}
这里是选择颜色的工作演示：



    

  • 
{{c}}

    • 




所选颜色：{{f.col}
尝试改为
ng model=f.col[c]
。谢谢，那么
ng truevalue
Ok如何，所以我让它工作了。首先，您将模型更改为
f.col[c]
，并将真值设置为
c
。然后您还需要在作用域上创建
f
和
f.col
对象。请改为尝试
ng model=f.col[c]
。谢谢，那么
ng真值如何
好，我让它工作了。首先，您将模型更改为
f.col[c]
，并将真值设置为
c
。然后您还需要在作用域上创建
f
和
f.col
对象。请改为尝试
ng model=f.col[c]
。谢谢，那么
ng真值如何
好，我让它工作了。首先，您将模型更改为
f.col[c]
，并将真值设置为
c
。然后您还需要在作用域上创建
f
和
f.col
对象。请改为尝试
ng model=f.col[c]
。谢谢，那么
ng真值如何
好，我让它工作了。首先，您将模型更改为
f.col[c]
，以及
c
的真实值。然后您还需要在范围上实际创建
f
和
f.col
对象。

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



<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>