javascript - ng-repeat 中的 Angular 单选按钮模型

Question

我觉得我只是在这里遗漏了一些东西，但我看不到什么。我似乎无法让单选按钮的值以与复选框相同的方式运行。我做错了什么？

这是一个演示:http://jsfiddle.net/vwJ6a/2/

这是我的 HTML 的样子

<tr ng-repeat="contact in ContactsList">
    <td>{{contact.name}}</td>
    <td>{{contact.email}}</td>
    <td ng-class="{'success':contact.isPrimary}">
        <input type="radio" name="radio-primary" ng-model="contact.isPrimary" />
    </td>
    <td ng-class="{'success':contact.isTechnical}">
        <input type="checkbox" ng-model="contact.isTechnical" />
    </td>
</tr>

这是我的 Controller

function MyCtrl($scope) {
    $scope.ContactsList = [{
        name: "John Doe",
        email: "joDoe@domain.com",
        isPrimary: false,
        isTechnical: true
    }, {
        name: "Jane Doe",
        email: "jaDoe@domain.com",
        isPrimary: true,
        isTechnical: false
    }, {
        name: "Bill Murray",
        email: "bMurray@domain.com",
        isPrimary: false,
        isTechnical: false
    }, {
        name: "Someone Dude",
        email: "someone@domain.com",
        isPrimary: false,
        isTechnical: false
    }];
}

Answer 1

好问题!我被困在一个类似的问题上并实现了一种解决方法。首先，我认为您不希望单选按钮以与复选框相同的方式运行。复选框允许多个值，而单选框不允许。大概说的很清楚，我只是想说明一下，以免造成误解。

AngularJS 文档对单选按钮的用法做了一些解释。 https://docs.angularjs.org/api/ng/input/input[radio]该解释没有考虑真正的“动态”环境。如您所见，颜色在示例中带有前缀。我假设，您希望您的表是完全动态的，没有任何前缀。

我做的第一件事是对 HTML 进行以下更改:

<form name="myForm" ng-controller="MyCtrl">
    <h4>Primary: {{GetPrimaryContact().email}}</h4>

    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Primary</th>
            <th>Technical</th>
            <th>Sales</th>
            <th>Billing</th>
            <th>Emergency</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="contact in ContactsList">
            <td>{{contact.name}}</td>
            <td>{{contact.email}}</td>
            <td ng-class="{'success':contact.isPrimary == 'true'}">
                <input type="radio" name="radio-primary" ng-model="contact.isPrimary" value="true" ng-change="update($index)" />
            </td>
            <td ng-class="{'success':contact.isTechnical}">
                <input type="checkbox" ng-model="contact.isTechnical" />
            </td>
            <td ng-class="{'success':contact.isSales}">
                <input type="checkbox" ng-model="contact.isSales" />
            </td>
            <td ng-class="{'success':contact.isBilling}">
                <input type="checkbox" ng-model="contact.isBilling" />
            </td>
            <td ng-class="{'success':contact.isEmergency}">
                <input type="checkbox" ng-model="contact.isEmergency" />
            </td>
        </tr>
        </tbody>
    </table>
</form>

success 类检查将 isPrimary 与字符串“true”进行比较。在单选按钮上进行比较时，我无法使用真正的 bool 值。

此外，现在有一个 value="true" 是比较所必需的(它检查行，其中 isPrimary 实际上是 true)。最后一件事是 ng-change 部分中的一个新方法。我们需要这个，因为当一个值变为真时，我们需要告诉 Controller 其他值是假的。这就是为什么我们还将 ng-repeat 迭代的 $index 赋给该方法，因为当前更改为 true 的值不会不需要再次为 false。

这是新的 Controller :

function MyCtrl($scope) {
    $scope.ContactsList = [{
        name: "John Doe",
        email: "joDoe@domain.com",
        isPrimary: 'false',
        isTechnical: true,
        isSales: false,
        isBilling: true,
        isEmergency: true
    }, {
        name: "Jane Doe",
        email: "jaDoe@domain.com",
        isPrimary: 'true',
        isTechnical: false,
        isSales: false,
        isBilling: true,
        isEmergency: true
    }, {
        name: "Bill Murray",
        email: "bMurray@domain.com",
        isPrimary: 'false',
        isTechnical: false,
        isSales: true,
        isBilling: false,
        isEmergency: false
    }, {
        name: "Someone Dude",
        email: "someone@domain.com",
        isPrimary: 'false',
        isTechnical: false,
        isSales: false,
        isBilling: false,
        isEmergency: true
    }];

    $scope.GetPrimaryContact = function () {
        return _.findWhere($scope.ContactsList, {
            isPrimary: 'true'
        });
    };

    $scope.update = function(index) {
        for (var i=0;i<$scope.ContactsList.length;i++) {
            if (index != i) {
                $scope.ContactsList[i].isPrimary = 'false';
            }
        }
    };
}

Controller 包含更改，即 isPrimary 使用字符串而不是 bool 值和新的 update() 方法。这是 jsfiddle 中的工作演示的链接:http://jsfiddle.net/vwJ6a/20/

更新:

克里斯和我显然找到了一种方法，在 ng-repeat 中为单选按钮使用真正的 bool 值。为了使用它，必须使用 ng-value="true" 而不是 value="true"。 value 似乎不起作用，我在这里得到了这个想法:AngularJS - Binding radio buttons to models with boolean values

HTML 部分将如下所示:

<form name="myForm" ng-controller="MyCtrl">
    <h4>Primary: {{GetPrimaryContact().email}}</h4>

    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Primary</th>
            <th>Technical</th>
            <th>Sales</th>
            <th>Billing</th>
            <th>Emergency</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="contact in ContactsList">
            <td>{{contact.name}}</td>
            <td>{{contact.email}}</td>
            <td ng-class="{'success':contact.isPrimary}">
                <input type="radio" name="radio-primary" ng-value="true" ng-model="contact.isPrimary" ng-checked="contact.isPrimary" ng-change="UpdatePrimary(contact)" />
            </td>
            <td ng-class="{'success':contact.isTechnical}">
                <input type="checkbox" ng-model="contact.isTechnical" />
            </td>
            <td ng-class="{'success':contact.isSales}">
                <input type="checkbox" ng-model="contact.isSales" />
            </td>
            <td ng-class="{'success':contact.isBilling}">
                <input type="checkbox" ng-model="contact.isBilling" />
            </td>
            <td ng-class="{'success':contact.isEmergency}">
                <input type="checkbox" ng-model="contact.isEmergency" />
            </td>
        </tr>
        </tbody>
    </table>
</form>

Controller 是这样的:

function MyCtrl($scope) {
    $scope.ContactsList = [{
        name: "John Doe",
        email: "joDoe@domain.com",
        isPrimary: false,
        isTechnical: true,
        isSales: false,
        isBilling: true,
        isEmergency: true
    }, {
        name: "Jane Doe",
        email: "jaDoe@domain.com",
        isPrimary: true,
        isTechnical: false,
        isSales: false,
        isBilling: true,
        isEmergency: true
    }, {
        name: "Bill Murray",
        email: "bMurray@domain.com",
        isPrimary: false,
        isTechnical: false,
        isSales: true,
        isBilling: false,
        isEmergency: false
    }, {
        name: "Someone Dude",
        email: "someone@domain.com",
        isPrimary: false,
        isTechnical: false,
        isSales: false,
        isBilling: false,
        isEmergency: true
    }];

    $scope.GetPrimaryContact = function () {
        return _.findWhere($scope.ContactsList, {
            isPrimary: true
        });
    };

    $scope.UpdatePrimary = function(contact) {
        _.each($scope.ContactsList, function(x) {
            x.isPrimary = (x.email === contact.email);
        });
    };
}

这是 jsfiddle 中的演示:http://jsfiddle.net/vwJ6a/24/