par*_*m72 16 javascript angularjs
我已经浏览了几个小时的类似问题,但没有想出任何完全匹配的东西.我想要做的是通过数据绑定到我的数据中的true/false值自动检查复选框.我可以让项目名称加载没有问题,我甚至可以稍后拉取复选框值以保存到服务器,但我无法获得正确加载的初始值.
这是一个简化的例子,显示了根本问题; HTML:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="shoppingListNg.js"></script>
<body ng-app>
<div ng-controller="ShoppingListCtrl">
<table>
<tr ng-repeat="item in shoppingList">
<td>
<div>{{item.text}}</div>
</td>
<td>
<input type="checkbox" ng-model="item.isGotten" />
</td>
</tr>
</table>
</div>
</body>
这是Javascript:
function ShoppingListCtrl($scope) {
$scope.shoppingList = [
{
"text": "V8 fusion",
"isGotten": "true"
},
{
"text": "Whole milk container",
"isGotten": "false"
},
{
"text": "Protein bars",
"isGotten": "true"
}
];
};
知道为什么我不能让那些复选框尊重模型中的"true"和"false"值吗？每当页面加载时,它们总是显示未选中状态.我是否需要使用ng-checked或其他指令？
mik*_*kel 17
问题是你在引号中有"true"和"false",这使得它们成为字符串而不是Angular可以将复选框绑定到的布尔值.
如果您只是按如下方式删除引号,那么您的代码将正常工作.一个工作示例位于http://plnkr.co/edit/gkchmOBTkBtVv3TijlZW.
function ShoppingListCtrl($scope) {
$scope.shoppingList = [
{
"text": "V8 fusion",
"isGotten": true
},
{
"text": "Whole milk container",
"isGotten": false
},
{
"text": "Protein bars",
"isGotten": true
}
];
};
根据您的数据,您可能不希望在代码中使用纯true/false.AngularJS无论如何都会将true/false和1/0布尔值计算为字符串,因此您最好使用字符串.
在这个codepen中,我使用"1"和"0"表示布尔值,使用ngTrueValue和ngFalseValue告诉AngularJS如何保持绑定完整.非常简单干净.
Codepen:http://codepen.io/paulbhartzog/pen/kBhzn
代码段:
<p ng-repeat="item in list1" class="item" id="{{item.id}}">
<strong>{{item.id}}</strong> <input name='obj1_data' type="checkbox" ng-model="list1[$index].data" ng-true-value="1" ng-false-value="0"> Click this to change data value below
</p>
<pre>{{list1 | json}}</pre>
如果我添加这样的额外引号,我只能得到ng-true-value有效(如官方Angular文档中所示 - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D)
ng-true-value="'1'"
| 归档时间： |
|
| 查看次数： |
36310 次 |
| 最近记录： |