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,
        "pletedDateTime" : 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.

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,
        "pletedDateTime" : 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.

• javascript
• angularjs
• json

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

3 Answers 3

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 plete code.

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

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,
    "pletedDateTime" : null,
    "instructions" : $scope.operations_publish
};

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

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