我们的想法是将真实的复选框值从移动设备发送到API,这样我就可以用选定的调味品下订单,但我无法掌握。调味品是从对API的HTTP get调用返回的。
<ion-checkbox ng-repeat="condiment in condiments" ng-model="condiment.checked"
ng-checked="checkItem(condiment.id)">
{{condiment.name}}
{{condiment.price}}
</ion-checkbox>
它调用函数:
$scope.checkItem = function (id) {
return $scope.condiments[id-1].checked = true;
};
(减1是因为ID从1开始,数组从0开始)但当选中/未选中时,它不会被调用,而是默认情况下会选中我的所有资源,一旦我单击取消选中它们,一切都不会改变。
属性"checked"不是调味品的原始JSON API输出的一部分。它有ID、名称和价格。
问题:
有没有一种不那么痛苦的方法可以将检查过的ID发送回服务器?
编辑:
我之前尝试过设置默认变量,但没有任何作用:
for(var i=0; i<$scope.condiments; i++){
$scope.condiments[i].checked = false;
}
我也面临这种问题,我用解决了这个问题
<input type="checkbox" ng-model="condiment.checked" ng-true-value="1"
ng-false-value="0" ng-checked="condiment.checked == 1">
这将直接在json中更改您的ng检查True
。。因此,在那之后,只需控制台您的API "condiments"
,您就会得到答案。。
如果您想在默认情况下设置为选中False。只需使用ng-init="condiment.checked=0"
。所以,如果你选中它,它会返回True,否则你会得到False。
您可以在复选框中浏览Angular Docshttps://docs.angularjs.org/api/ng/directive/ngChecked.它清楚地告诉不要将ng-model
与ng-checked
一起使用,这可能会导致意想不到的结果。
您可以删除ng-checked
。。。
<ion-checkbox ng-repeat="condiment in condiments" ng-model="condiment.checked">
{{condiment.name}}
{{condiment.price}}
</ion-checkbox>
在控制器中你可以得到调味品id的
$scope.checkItems = function(){
var CID = [];
angular.forEach($scope.condiments,function(condiment){
if(condiment.checked){
CID.push(condiment.id);
}
});
//send CID to server
};
试试这个,这是为您创建的小提琴。看到这个
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="(key,val) in condiments">
<input type="checkbox" ng-model="selected[val.id]"
ng-click="checked(key,selected[val.id])"
ng-true-value="true" ng-false-value="false">
{{val.name}}
</div>
<br>
<br>
<div>added status into main array
<br>{{condiments}}</div>
</div>
</div>
这是控制器和逻辑
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.selected = {};
$scope.condiments = [{ id: 1, name: "item1", price: 100 },
{ id: 2, name: "item2", price: 200 },
{ id: 3, name: "item3", price: 300 }];
angular.forEach($scope.condiments, function(val, index) {
$scope.selected[val.id] = "true";
$scope.condiments[index].checked = true;
})
$scope.checked = function(key, status) {
if (status == "true") {
$scope.condiments[key].checked = true;
} else {
$scope.condiments[key].checked = false;
}
}
}