如何使用 angularjs 设置单选按钮？

Question

这是我的用例

在我的 HTML 页面中，我有两组单选按钮：标记为："PRESENT" 和 "ABSENT" / 值：分别为 True 和 False。

最初我想在所有公司中将状态设置为 "PRESENT"。

如果我在 table 的 header 中设置 ABSENT 单选按钮，它将在所有公司中将状态更新为 ABSENT 并且也适用于个人

这是我的脚本

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

我的 html 页面是

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

最初我想在所有公司中将状态设置为 PRESENT

我的预期输出是

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

你能帮我设置这个场景吗？

Answer 1

你的代码有几个问题

单选按钮 group 应该使用相同的 ng-model。当 ng-model 值等于 name 值时，将选中此单选按钮。所以你的第一对 Present 和 Absent 有 ng-model - $scope.all 其中默认值为 'allPresent'
关于ng-repeat：我们有4个组，每组2个。所以我们需要创建 4 个不同的 ng-model。所以我们写了：ng-model="company.selected" 其中 selected 值将是 true 或 false。为此，我们在 ng-value true 和 false
到un/select我们使用ng-change="onSelect(false)"和ng-change="onSelect(true)"的所有收音机，这将运行所有组并改变selectedfrom/totrue/false

所以我发布了工作示例。

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

如何使用 angularjs 设置单选按钮？

How to setup radiobutton using angularjs?

angularjs

angularjs-scope