如何使用AngularJS设置RadioButton

Question

这是我的用例

在我的HTML页面中，我有两组广播按钮：标签："现在"one_answers"缺失"/值：true和false。

我想在所有公司中都将状态设置为"存在"。

如果我在表的标题中设置了缺乏广播按钮，它将在所有公司中不使用状态，并且也可以在个人工作

。

这是我的脚本

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

我想在所有公司中都设置状态

我的预期输出是

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

您可以帮助我设置此情况吗？

Answer 1

在您的代码中，有几个问题

• 无线电按钮组应使用相同的ng-model。当ng-model值等于name值时，将选择此单元按钮。因此，您的第一对Present和Absent具有ng-model -$scope.all，其中默认值为'allPresent'

• 关于ng重复：我们有4组，每组有2个。因此，我们需要创建4种不同的ng-model s。因此，我们写道： ng-model="company.selected"其中 selected值为 true或 false。因此，我们在ng-value true和false

中定义

• un/选择所有收音机，我们使用的ng-change="onSelect(false)"和ng-change="onSelect(true)"将在所有组上运行，然后将selected从/更改为true/frue/fore/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; 
           })
        }

演示小提琴