How to bind dynamic Check boxes value using ng-model?

Question

I want to put the values of dynamic checkboxes (not boolean true and false) in the form of array using 'ng-model' in a similar way as is done using 'name' attribute. This array is now put into a JSON object.

<td>
   <span ng-repeat="operation in operations_publish">
            <input type="checkbox" name="operations" ng-model="operations" value="{{operation}}"/>
            {{operation}}
   </span>
</td>

Following is my function to post the JSON object:

$scope.send = function() {
    console.log("test");
    var dataObj = {
        "operationType" : $scope.operationType,
        "conceptModelID" : $scope.conceptID,
        "requestor" : $scope.requestor,
        "status" : "new",
        "requestDateTime" : null,
        "lastExecutedDateTime" : null,
        "completedDateTime" : null,
        "instructions" : $scope.operations

    };
    console.log(dataObj);
    console.log(dataObj.instructions);
    var response = $http.post('PostService', dataObj);
    response.success(function(data, status, headers, config) {
        $scope.responseData = data;
    });
    response.error(function(data, status, headers, config) {
        alert("Exception details: " + JSON.stringify({
            data : data
        }));
    });

But 'dataObj.instructions' is undefined when I run the code. Please suggest whether it is the right way of doing it and what am I missing here.

You have ng-model="operations" however operation as your iterator in the ng-repeat. — Sean Larkin
– Sean Larkin, Commented Nov 30, 2015 at 19:49

lex82 · Accepted Answer · 2015-11-30 20:01:41Z

4

You have to bind each input to a different value. Currently all of them are bound to the field operations in the scope via ng-model="operations".

I suggest you create an array operations in your controller like this:

$scope.operations = new Array($scope.operations_publish.length);

Then you can bind the checkboxes to the respective index in this array:

<span ng-repeat="operation in operations_publish">
    <input type="checkbox"
           name="operations"
           ng-model="operations[$index]"
           value="{{operation}}"/>
    {{operation}}
</span>

This will give you an array with true at all checked indexes. If you then want the selected values as strings in an array, you can collect them like this:

function getSelected() {
    return $scope.operations_publish.filter(function (x,i) {
        return $scope.operations[i]
    });
}

Check this fiddle for the complete code.

answered Nov 30, 2015 at 20:01

lex82

11.4k2 gold badges48 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manoj Suthar Over a year ago

Thanks. It answered my question and I am getting the values in the array now. However, when I am trying to post the JSON object to my spring controller, I am getting the error: 400(Bad Request). Any idea what could have caused that?

lex82 Over a year ago

No, sorry, that is really hard to tell without further information. Did you examine the request in your browser? I mean, get the actual URL that was requested and the HTTP parameters?

Igloob · Accepted Answer · 2015-11-30 19:48:57Z

1

did you try ?

<input type="checkbox" ng-model="cbValues[$index]"
    ng-repeat="value in cbValues track by $index" />

Works for me : http://plnkr.co/edit/s0rZiMeL4NvpFZ3C9CIL?p=preview

answered Nov 30, 2015 at 19:48

Igloob

1975 bronze badges

Comments

Sean Larkin · Accepted Answer · 2015-11-30 19:51:15Z

According to your example listed there, you have bound your ng-model to the expression operations, however you need to be binding it to the individual iterator operation (from) ng-repeat="operation in operations_publish".

You can then set that data in your dataLog object:

var dataObj = {
    "operationType" : $scope.operationType,
    "conceptModelID" : $scope.conceptID,
    "requestor" : $scope.requestor,
    "status" : "new",
    "requestDateTime" : null,
    "lastExecutedDateTime" : null,
    "completedDateTime" : null,
    "instructions" : $scope.operations_publish
};

Data binding by default in angular are multi-directional therefore:

operations_publish => bound to row via iterator operation
operation => bound to checkbox value via ng-model
When the value of the checkbox changes, you change the variable it was bound to, and the collection that variable iterated from.

Collectives™ on Stack Overflow

How to bind dynamic Check boxes value using ng-model?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related