Json model not binding in angular

Question

Angular 1 app here.

I have this json file named data.json:

[
{
  "rejectionType": "REJECTION_1",
  "user": "ALL",
  "selected": false
},
{
  "rejectionType": "REJECTION_2",
  "user": "MALE",
  "selected": false
},
{
  "rejectionType": "REJECTION_3",
  "user": "FEMALE",
  "selected": false
}
]

In controller I do the following:

$http.get('data.json').then(function(response) {
var rejectionData = response.data;
myctrl.currentRejections = _.filter(rejectionData, function(item, index) {
  return _.contains(["ALL", "MALE"], item.user);
})
console.log("myCtrl.currentRejections:",myCtrl.currentRejections);
$("#modRejectionReason").modal("show");
});

The modal in the view looks like this:

<div id="modRejectionReason">
        <div class="modal-body">
            <p>
                <div ng-repeat="allrejections in myctrl.currentRejections">
                    <p>
                        <input type="radio" name="selected" ng-model="allrejections.selected" />
                        {{allrejections.rejectionType}}
                    </p>
                </div>
            </p>
        </div>
        <div class="modal-footer">
            <button type="button" ng-click="myctrl.func()">OK</button>
        </div>
    </div>
</div>
</div>

And then in the controller I have this:

var declineInvite = function () {
console.log("myctrl.currentRejections:",myctrl.currentRejections);
}

In the log I see that when the modal appears, then the variable myCtrl.currentRejections is printed. And it is an array with all the filtered elements. For each element I see that the field selected is false.

When I then check a radio button and then click on the OK-button the function func is triggered. Even here the same data is printed in the console. However, for those radio buttons that have been clicked in the json the value for the field selected is undefined. What am I missing here?

George · Accepted Answer · 2018-10-01 13:09:07Z

You need to give the radio buttons a value to set when they are checked.

<input type="radio" name="selected" ng-model="allrejections.selected" ng-value="true"/>

The problem with doing this in your current code is that the selected:true will never be unset, so I suggest adding a new value on the controller called selectedRejection and using that as the model and setting the value to the actual rejection object. Doing this means you can get rid of the selected property on your JSON data too!

var myApp = angular.module('myApp', []).controller("MyCtrl", MyCtrl);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl() {
  var MyCtrl = this;
  MyCtrl.currentRejections = [{
      "rejectionType": "REJECTION_1",
      "user": "ALL",
      "selected": false
    },
    {
      "rejectionType": "REJECTION_2",
      "user": "MALE",
      "selected": false
    }
  ]

  MyCtrl.selectedRejection = null;

  MyCtrl.submit = function() {
    console.log(MyCtrl.selectedRejection)
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="MyCtrl as MyCtrl">
    <div ng-repeat="allrejections in MyCtrl.currentRejections">
      <p>
        <input type="radio" name="selected" ng-model="MyCtrl.selectedRejection" ng-value="allrejections" /> {{allrejections.rejectionType}}
      </p>
    </div>


    <button type="button" ng-click="MyCtrl.submit()">OK</button>
  </div>
</body>

Collectives™ on Stack Overflow

Json model not binding in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related