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:

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

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>

• javascript
• angularjs
• radio-button

2 Answers 2

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 paring the name field of the object is because there is no unique identifier to pare with. In real code, you would want to pare against an ID rather than a name field.

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