Javascript 角度单选按钮模型内ng重复

我觉得我只是错过了一些东西，但我看不出是什么。我似乎无法使单选按钮的值与复选框的行为方式相同。我做错了什么

下面是一个演示：

下面是我的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>

---

我相信，如果您将value=“1”添加到您的无线电输入线路，您将获得您想要的结果

<input type="radio" value="1" name="radio-primary" ng-model="contact.isPrimary" />

---

问得好！我被困在一个类似的问题上，并实施了一种变通方法。首先，我认为您不希望单选按钮的行为与复选框相同。复选框允许多个值，而收音机不允许。也许这是清楚的，我只是想说出来，以防止误解

AngularJS文档对单选按钮的使用进行了一些解释。这种解释没有考虑到真正的“动态”环境。正如您所看到的，颜色在示例中是前缀。我假设，您希望您的表是完全动态的，没有任何前缀

我做的第一件事是对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>

控制器包括更改，

isPrimary

使用字符串而不是布尔值，以及新的

update（）

方法。下面是一个链接，指向JSFIDLE中的一个工作演示：

更新：

Chris和我显然找到了一种方法，在ng repeat中为单选按钮使用真正的布尔值。 为了使用它，必须使用

ng value=“true”

而不是

value=“true”

<代码>值似乎不起作用，我的想法是：

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>

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);
        });
    };
}

---

这里是JSFIDLE中的一个演示：

主要区别在于复选框允许多次选择，而单选按钮不允许。 这就是为什么单选按钮应该共享同一型号。在您的例子中，

ngModel

s指向不同的对象

这就是我如何绕过它的方法：

<td ng-class="{'success':primaryContact.email == contact.email}">
    <input type="radio" name="radio-primary" ng-model="primaryContact.email" 
    ng-value="contact.email"/>
</td>

---

我知道你的痛苦——几周前我也遇到过类似的问题——可能会有帮助：@tymeJV这个问题没有明确的答案——你有没有找到解决办法？就我在编辑的问题中发布的内容——其他一切似乎都失败了……不知道Angular的收音机会如此……不合逻辑（在我看来）我正在查看链接中的小提琴，选择了Jane Doe单选按钮，它与您的模型相匹配。是的，但尝试与它交互。它无法通过应用的CSS类正确更新模型或背景颜色。将其与复选框的工作方式进行比较。非常好！这无疑让我走上了正确的道路，但让我感到难过的是，这就是Angular让我们完成这项简单任务的方式。如果可能的话，我真的不想使用字符串布尔值。我主要是根据您的示例来实现的，但它并不是最初检查单选按钮：只需将

值

与

ng值

交换即可轻松实现。此外：我认为AngularJS是一个非常好的框架，大多数东西都可以工作，正如我所期望的那样！此外，

ng模型

方法也适用于您的情况。我认为手动更新其他值是很自然的。如果解决了你的问题，请你也接受这个答案：）事实上，我最终需要这个解决方案。您能更新它以反映您在最近的评论中对JSFIDLE所做的更改吗？谢谢当然，我更新了答案并描述了解决方案，布尔值也可以使用！您不需要发送更改为“UpdatePrimary（contact）”的联系人。这是真的：$scope.UpdatePrimary=function（）{//will know This.contact.whatever}对于我所需要的，这是最简单的解决方案。谢谢

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);
        });
    };
}

<td ng-class="{'success':primaryContact.email == contact.email}">
    <input type="radio" name="radio-primary" ng-model="primaryContact.email" 
    ng-value="contact.email"/>
</td>

$scope.primaryContact = {
    email:"jaDoe@domain.com"
};