CODEWITHSUNDEEP
javascriptangularjsradio-button
lito
lito

Reputation: 3125

In AngularJS how to uncheck a radio button to make all objects become false

I have an array with many "contact" objects inside. Only one contact can be the primary contact (primary: true).

I also have a radio button to select which contact is the primary.

Q: How can I make one contact primary and deactivate all of the others (primary: false)? so only one object have the property (primary: true) and the rest false?

My example: http://plnkr.co/edit/Y3as4SXv2ZGQSF39W8O6?p=preview

.controller('ExampleController', ['$scope',
        function($scope) {
        $scope.addContList = [
            {
                email: "[email protected]",
                jobTitle: "clerk",
                name: "nico2",
                phone: "1",
                primary: true
            },
            {
                email: "[email protected]",
                jobTitle: "director",
                name: "david",
                phone: "1",
                primary: false
            }
        ];
          $scope.$watch('addContList', function() {
            console.log('changed', JSON.stringify($scope.addContList, null, 2))
          }, true)

        }
      ]);

Here is the view

<tr ng-repeat="contact in addContList">
          <td>
            <label class="radio-inline">
              <input type="radio" value="" name="ui_cont" ng-model="contact.primary" ng-value="true">
            </label>
          </td>
          <td>{{ contact.name }} value = {{contact.primary}} </td>
          <td>Edit</td>
          <td>Delete</td>
        </tr>

Upvotes: 1

Views: 5076

Answers (2)

mcranston18
mcranston18

Reputation: 4800

You would want to add an ngChange event to your input and change all other inputs to false when one gets set to true. I have updated your Plnkr here: http://plnkr.co/edit/7gxI7if9nC7hAMQES1eu?p=preview

<input type="radio" value="" name="ui_cont" ng-change='changeOnPrimary(contact)' ng-model="contact.primary" ng-value="true">

Then in your controller:

$scope.changeOnPrimary = function(selectedContact) {
  // iterate over your whole list
  angular.forEach($scope.addContList, function(contact) {
    // set primary to false for all contacts excepts selected
    if (selectedContact.name !== contact.name) {
      contact.primary = false;
    }
  });
}

Please note: the only reason I'm comparing the name field of the object is because there is no unique identifier to compare with. In real code, you would want to compare against an ID rather than a name field.

Upvotes: 4

Robert Kubiak
Robert Kubiak

Reputation: 155

You can define a new scope property

$scope.primary = null

Then you can define a listener

$scope.$watch("primary", function(value) {
  $scope.addContList.forEach(function(contact) {
    contact.primary = angular.equals(value, contact);
  })
})

and you can define a default value after defining the list

$scope.primary = $scope.addContList[0];

and in the html you change the input line in

<input type="radio" value="" name="ui_cont" ng-model="$parent.primary" ng-value="contact">

You need to use $parent.primary instead of primary, because ng-repeat defines a new child scope.

see http://plnkr.co/edit/5pvatBNwnrJhGzKhOIys?p=preview

Upvotes: 2

Related Questions