使用 AngularJS 验证单选按钮

Question

我有一个使用 AngularJS、Monaca 和 Onsen UI 的跨平台应用程序。

在我的一个视图中，我有一个列表项数组，每个列表项可以有随机数量的与之关联的单选按钮。

列表数组是在运行时从通过 API 调用返回的 JSON 构建的。 我的 JSON 示例如下：

[{
    "fruitID": "1",
    "fruitname": "Apple",
    "options": [{
        "optionID": "1",
        "optiondescription": "Has seeds"
    }, {
        "optionID": "2",
        "optiondescription": "Can be eaten raw"
    }, {
        "optionID": "3",
        "optiondescription": "Has edible skin"
    }]
}, {
    "fruitID": "2",
    "fruitname": "Banana ",
    "options": [{
        "optionID": "1",
        "optiondescription": "Has no seeds"
    }, {
        "optionID": "2",
        "optiondescription": "Can be eaten raw"
    },
        {
        "optionID": "3",
        "optiondescription": "Needs to be peeled"
    },
        {
        "optionID": "4",
        "optiondescription": "Short shelf life"
    }]
}]

例如，列表可能包含随机数量的水果项目，每个水果可能有随机数量的与之关联的选项。例如

- 苹果 (1) -- 有种子 (1) -- 可以生吃 (2) -- 有可食用的皮肤 (3)

- 香蕉 (2) -- 没有种子 (1) -- 可以生吃 (2) -- 需要去皮 (3) -- 保质期短 (4)

- 菠萝 (3) *-- 可以生吃 (1) -- 需要去皮（2）

对于每种水果，用户必须选择一个选项。当用户选择一个选项时，我需要保存两个fruitID，例如Banana (2) 以及 optionID 例如可以生吃 (2)，以便这些值可以作为 JSON 发送回我的数据库。

目前，我通过 ng-click() 在视图中的单选按钮上注册事件，并将 fruitID 和 optionID 的值传递给我的控制器中的函数如下：

<ul class="list">
    <li class="list__item" ng-repeat="checkFruitDescription in data"> <!-- Where data is the JSON -->
        <span class="list__item__line-height"><strong>{{checkFruitDescription.fruitname}}</strong></span>

        <label class="radio-button" ng-repeat="option in checkFruitDescription.options">
            <input type="radio" 
                name="option_question_id_{{checkFruitDescription.fruitID}}" 
                ng-model="checkFruitDescription.selected_id"
                ng-click="doSomething(checkFruitDescription.fruitID, option.optionID)"
                ng-value="option.optionID">
            <div class="radio-button__checkmark"></div>

             Description: {{option.optiondescription}}
        </label>
    </li>
</ul>

在我的 doSomething() 函数中，我想将每个选中的单选按钮的 fruitID 和 optionID 值保存到一个数组中（这是最好的选择吗？）。但是，我需要验证单选按钮 - 因此，如果用户为 Apple 选择了一个选项但随后改变了主意，我需要更新当前存储的值。

在我的 doSomething() 函数中我尝试过：

$scope.selectedRadioArray = [];

$scope.doSomething = function(fruitID, optionID)
{
    // Where data = JSON
    if ($scope.data.fruitID.indexOf(fruitID) != -1)
    {
        // There is a match for fruitID in data.fruitID
        // Save the values to an array
        $scope.selectedIDS = [fruitID, optionID];

        // Push the array to a new array
        $scope.selectedRadioArray.push($scope.selectedIDS);
    }
    else
    {
        // Do something else
    }
}

但我在这里遇到了问题。将 selectedIDS 数组保存到 selectedRadioArray 可以，但是：

• 对数组进行排序以将 fruitID 与 optionID 匹配变得非常困难
• 如果用户改变主意并选择一个新的 optionID，例如Apple，那么旧的值仍然保留在数据库中。我尝试实现 indexOF() 函数，但问题是 optionID 对于很多水果选项（1、2、3、...）都是相同的。因此，如果我检查 Apple 的 indexOF() optionID，它可能会返回它已被选中，即使它可能会找到 Bananas 的值。

处理单选按钮验证的最佳方法是什么，以及保存单选按钮单击时返回的值的最佳方法是什么？

Answer 1

您可以省去手动选择fruitID 和optionID 的麻烦，只需将它们定义为单选按钮ng-value 中的一个对象，如下所示：

ng-value="{fruit: checkFruitDescription.fruitID, option: option.optionID}"

这样checkFruitDescription.selected_id 会同时保存fruitID 和selected 选项。您可以更进一步，对单选按钮的ng-model 进行调整，以使单选按钮正常工作，而无需在控制器中编写任何代码：

ng-model="selectedArray[$parent.$index]"

现在 selectedArray 包含所有结果。请记住首先在您的控制器中创建 selectedArray 。这是一个plunkr： http://plnkr.co/edit/IgpAXu8tbKUXj9ACPtZs?p=preview

Answer 2

应用此代码：

$scope.selectedRadioArray = [];

$scope.doSomething = function(fruitID, optionID) {
var status = 0;
if ($scope.selectedRadioArray.length > 0) {
    // check whether selected fruit exists into array or not 
    $scope.selectedRadioArray.forEach(function(e, i) {
        if (e.fruitID == fruitID) {
            // updates option ID into same array position
            $scope.selectedRadioArray[i] = {
                fruitID: e.fruitID,
                optionID: optionID
            };
            status = 1;
        }
    });
    // if this fruit id not available then save it into array
    if (status != 1) {
        var fruits_row = {
            fruitID: fruitID,
            optionID: optionID
        };
        $scope.selectedRadioArray.push(fruits_row);
    }
} else {
    // if there is no  value into array
    var fruits_row = {
        fruitID: fruitID,
        optionID: optionID
    };
    $scope.selectedRadioArray.push(fruits_row);
  }
}