来自 API 的 Ionic/AngularJS 复选框和 ng-repeat [重复]答案

【问题标题】：Ionic/AngularJS checkbox and ng-repeat from API [duplicate]来自 API 的 Ionic/AngularJS 复选框和 ng-repeat [重复]
【发布时间】：2016-04-29 06:34:35
【问题描述】：

这个想法是将真正的复选框值从移动设备发送到 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开始）但是在选中/取消选中时不会调用它，而是默认选中我的所有资源，一旦我单击取消选中它们，什么都不会改变。

“已检查”属性不是调味品原始 JSON API 输出的一部分。它有 ID、名称和价格。

问题：

有没有一种不那么痛苦的方式将检查的 ID 发送回服务器？

编辑：

我之前尝试设置默认变量，但没有任何作用：

for(var i=0; i<$scope.condiments; i++){
            $scope.condiments[i].checked = false;
}

【问题讨论】：

标签： angularjs api checkbox ionic-v1

【解决方案1】：

我也遇到过这种问题，我通过这样使用解决了这个问题，

 <input type="checkbox" ng-model="condiment.checked" ng-true-value="1"
        ng-false-value="0" ng-checked="condiment.checked == 1">

这将直接在 json 中更改您的 ng-checked True.. 所以之后只需控制台您的 API "condiments" 您就会得到答案..

如果你想设置默认检查为 False 。只需使用 ng-init="condiment.checked=0"。所以，如果你检查它会返回 True 否则你会得到 False 。

【讨论】：

效果惊人！谢谢
只有一件事...看来我必须单击两次才能更改复选框的值？
你在同一行使用 ng-init 和 ng-checked 吗？如果这意味着删除 ng-init 并将其放置在某处或使其在后端本身为 false .. 否则请告诉我到底发生了什么？如果你创建小提琴它会更好地识别你的问题。
ng-checked 的文档明确指出，将其与 ng-model 一起使用会产生意想不到的结果。

【解决方案2】：

您可以通过复选框 https://docs.angularjs.org/api/ng/directive/ngChecked 浏览 Angular 文档。它清楚地告诉不要将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
};

【讨论】：

【解决方案3】：

试试这个，这是为您创建的小提琴。 see this

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

【讨论】：