How to setup radiobutton using angularjs?

Question

This is my use case

In my HTML page, I have two sets of radio buttons: Labeled: "PRESENT" and "ABSENT" / Values: True and False respectively.

Intially i want to set status as "PRESENT" in all companies.

If i set ABSENT radio button in header of the table it will update status as ABSENT in all companies and also work in individual too

This is my script

<script>
     var myApp = angular.module('myApp', []);

     myApp.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {

            $scope.companies = [{
                "id": 4,
                "name": "Facebook"
            }, {
                "id": 3,
                "name": "Twitter"
            }, {
                "id": 2,
                "name": "Google"
            }, {
                "id": 1,
                "name": "Apple"
            }]

            $scope.userChoice = {};

     }]);

</script>

My html page is

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
    <table>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th><input type="radio" ng-model="allPresent" name="company" value="{{company.id}}" />Present</th>
            <th><input type="radio" ng-model="allAbsent" name="company" value="{{company.id}}" />Absent</th>
        </tr>   
        <tr ng-repeat="company in companies">
            <td>{{$index+1}}</td>
            <td>{{company.name}}</td>
            <td><input type="radio" ng-model="userChoice.companyIdPresent" name="companyId" value="{{company.id}}" /></td>
            <td><input type="radio" ng-model="userChoice.companyIdAbsent" name="companyId" value="{{company.id}}" /></td>
        </tr>
    </table>
    <br>
    <br>
    <br>CompanyId is: {{userChoice.companyId}}
    <br>
    <br>
    <button ng-disabled="!userChoice.companyId">Continue</button>
    </div>
</div>

Intially i want to set status as PRESENT in all companies

My Expected output is

$scope.userChoice = [{
                "companyId": 4,
                "status": "PRESENT"
            }, {
                "id": 3,
                "status": "ABSENT"
            }, {
                "id": 2,
                "status": "ABSENT"
            }, {
                "id": 1,
                "status": "PRESENT"
            }]

can you help me to setup this scenario?

Answer 1

In your code there several issues

• Radio buttons group should use same ng-model. When ng-model value equals to name value, this radio button will be selected. So your 1st pair Present and Absent have ng-model - $scope.all where default value is 'allPresent'

• About ng-repeat: we have 4 groups, 2 in each group. So we need to create 4 different ng-models. So we wrote: ng-model="company.selected" where selected value will be true or false. For that reason we defined in ng-value true and false

• to un/select all radios we used ng-change="onSelect(false)" and ng-change="onSelect(true)" that will run on all groups and change selected from/to true/false

---

So I posted working example.

HTML

<table>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th><input type="radio" ng-model="all" name="all" value="allPresent"  ng-change="onSelect(true)" />Present</th>
            <th><input type="radio" ng-model="all" name="all" value="allAbsent"   ng-change="onSelect(false)"/>Absent</th>
        </tr>   
        <tr ng-repeat="company in companies">
            <td>{{$index+1}}</td>
            <td>{{company.name}}</td>
            <td><input type="radio" ng-model="company.selected" name="{{company.name}}" ng-value="true" /></td>
            <td><input type="radio" ng-model="company.selected" name="{{company.name}}" ng-value="false" /></td>
        </tr>
    </table>

JS

$scope.companies = [{
            "id": 4,
            "name": "Facebook",
            "selected": true
        }, {
            "id": 3,
            "name": "Twitter",
            "selected": true
        }, {
            "id": 2,
            "name": "Google",
            "selected": true
        }, {
            "id": 1,
            "name": "Apple",
            "selected": true
        }];

        $scope.userChoice = {}; 

        $scope.all = 'allPresent';

        $scope.onSelect = function(val){             
           angular.forEach($scope.companies, function(value){ 
               value.selected = val; 
           })
        }

DEMO FIDDLE