Ionic/AngularJS复选框和ng从API重复
这个想法是将真实的复选框值从手机发送到API,这样我就可以订购所选的调味品,但我无法掌握它。调味品是从对API的HTTP GET调用返回的Ionic/AngularJS复选框和ng从API重复,angularjs,api,checkbox,ionic-v1,Angularjs,Api,Checkbox,Ionic V1,这个想法是将真实的复选框值从手机发送到API,这样我就可以订购所选的调味品,但我无法掌握它。调味品是从对API的HTTP GET调用返回的 <ion-checkbox ng-repeat="condiment in condiments" ng-model="condiment.checked" ng-checked="checkItem(condiment.id)"> {{condiment.nam
<ion-checkbox ng-repeat="condiment in condiments" ng-model="condiment.checked"
ng-checked="checkItem(condiment.id)">
{{condiment.name}}
{{condiment.price}}
</ion-checkbox>
(减1是因为ID从1开始,数组从0开始)
但选中/取消选中时不会调用它,而是默认情况下它会选中我的所有资源,一旦我单击取消选中它们,就不会有任何更改
属性“checked”不是调味品原始JSON API输出的一部分。它有ID、名称和价格
问题:
是否有一种不那么痛苦的方式将检查过的ID发送回服务器
编辑:
我以前尝试过设置默认变量,但没有效果:
for(var i=0; i<$scope.condiments; i++){
$scope.condiments[i].checked = false;
}
for(var i=0;iMe也面临这种问题,
我用这样的方法解决了这个问题
<input type="checkbox" ng-model="condiment.checked" ng-true-value="1"
ng-false-value="0" ng-checked="condiment.checked == 1">
这将直接在json中更改你的ng checkedTrue
。因此,在这之后,只需控制台你的API“调味品”
你就会得到答案
如果你想让set checked默认为False。只需使用,ng init=“consumment.checked=0”
。因此,如果你选中它,它将返回True,否则将返回False。我也面临着这种问题,
我用这样的方法解决了这个问题
<input type="checkbox" ng-model="condiment.checked" ng-true-value="1"
ng-false-value="0" ng-checked="condiment.checked == 1">
这将直接在json中更改你的ng checkedTrue
。因此,在这之后,只需控制台你的API“调味品”
你就会得到答案
如果您希望设置默认选中为False。只需使用,ng init=“consumment.checked=0”
。因此,如果您选中它,将返回True,否则将返回False。您可以查看复选框上的角度文档。它清楚地告诉您,如果选中ng
,则不要使用ng model
,这可能会导致意外结果
您可以删除选中的ng
<ion-checkbox ng-repeat="condiment in condiments" ng-model="condiment.checked">
{{condiment.name}}
{{condiment.price}}
</ion-checkbox>
您可以查看复选框上的角度文档。它清楚地告诉您不要在选中ng时使用ng model
,这可能会导致意外结果
您可以删除选中的ng
<ion-checkbox ng-repeat="condiment in condiments" ng-model="condiment.checked">
{{condiment.name}}
{{condiment.price}}
</ion-checkbox>
试试这个,这是为你制作的小提琴
试试这个,这是为你制作的小提琴
这真是太棒了!谢谢一件事…我似乎必须点击两次才能更改复选框的值?您是否在同一行中使用了ng init和ng checked?如果这意味着删除ng init并将其放置在某个位置,或者在后端本身将其设置为false。否则请告诉我到底发生了什么?如果您创建了fiddle,则更好地识别您的issue.ng checked
的文档清楚地表明,将其与ng model
一起使用会产生意外的结果。这真是太棒了!感谢一件事…我似乎必须单击两次才能更改复选框的值?您是否在同一行中使用ng init和ng checked?如果这意味着删除ng init并将其放置在同一行中mewhere或使其在后端本身为false..否则请告诉我到底发生了什么?如果创建FIDLE,则更好地识别您的问题。ng checked
的文档清楚地说明,将其与ng模型一起使用会产生意外的结果。
<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;
}
}
}