Ionic/AngularJS checkbox and ng-repeat from API

Question

The idea was to send true checkbox values from mobile to API so I can place an order with selected condiments, however I cant to get a grasp on it. Condiments are returned from HTTP GET call to API.

<ion-checkbox ng-repeat="condiment in condiments" ng-model="condiment.checked"
                          ng-checked="checkItem(condiment.id)">
                {{condiment.name}}
                {{condiment.price}}
</ion-checkbox>

It calls the function:

$scope.checkItem = function (id) {
            return $scope.condiments[id-1].checked = true;
};

(minus 1 is because ID starts at 1, and array at 0) But it is not called when checked/unchecked, but rather it makes all my resources checked by default, and once I click to uncheck them, nothing changes.

Property 'checked' is not part of the original JSON API output for the condiment. It has ID, name and price.

Question:

Is there a less painful way to send checked ID's back to server?

Edit:

I tried to set the default variables before, but that does nothing:

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

score 1 · Accepted Answer · edited Aug 19 '18 at 08:59

1

Me also Faced this kind of issue, I solved this by using like this,

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

This will Change your ng-checked True directly in json.. so after that simply console your API "condiments" you will get your answer..

and if you want set checked by default False .simply use , ng-init="condiment.checked=0". so, if you checked it will return True else You will get False .

edited Aug 19 '18 at 08:59

georgeawg

48,608
13
72
95

answered Apr 29 '16 at 06:46

Mohideen bin Mohammed

18,813
10
112
118

That works amazing! Thanks – Norgul Apr 29 '16 at 06:57
Just one thing...it seems I have to click twice in order to change the value of the checkbox? – Norgul Apr 29 '16 at 07:15
are you using ng-init and ng-checked in same line? if it means remove ng-init and place it somewhere or make it false in backend itself.. else tell me the exactly what happen? if u create fiddle its much better to identify your issue. – Mohideen bin Mohammed Apr 29 '16 at 09:26
The documentation for `ng-checked` clearly states that using it with `ng-model` can produce unexpected results. – georgeawg Aug 19 '18 at 09:13

score 1 · Answer 2 · answered Apr 29 '16 at 06:57

You can go through the Angular Docs on checkboxes https://docs.angularjs.org/api/ng/directive/ngChecked. It clearly tells don't use ng-model with ng-checked, it may lead in unexpected results.

You can remove ng-checked...

<ion-checkbox ng-repeat="condiment in condiments" ng-model="condiment.checked">
            {{condiment.name}}
            {{condiment.price}}
</ion-checkbox>

and in controller you can get condiments id's

$scope.checkItems = function(){
    var CID = [];
    angular.forEach($scope.condiments,function(condiment){
        if(condiment.checked){
           CID.push(condiment.id);
        }
    });

    //send CID to server
};

score 1 · Answer 3 · edited Aug 19 '18 at 08:57

try this, here is the fiddle created for you. 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>

here is the controller and logic

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

Ionic/AngularJS checkbox and ng-repeat from API

3 Answers3