使用 AngularJS 验证单选按钮

Question

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

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

列表数组是在运行时从 JSON 构建的，该 return 通过 API 调用编辑。下面是我的 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)

对于每一种水果，用户必须select一个选项。当用户 select 有一个选项时，我需要同时保存 fruitID，例如Banana (2) 以及选项 ID，例如可以生吃 (2) 这样这些值就可以作为 JSON.[=14= 发送回我的数据库]

目前，我通过 ng-click() 在我的视图中的单选按钮上注册事件，并将 fruitID 和 [=40 的值传递给控制器中的函数=]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 保存值 select编辑到一个数组（这是最好的选择吗？）。但是，我需要验证单选按钮 - 因此，如果用户 select 苹果的一个选项但随后改变了主意，我需要更新当前存储的值。

在我的 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 变得非常困难
如果用户改变主意并且 selects 一个新的 optionID 例如Apple，然后旧值仍然保留在数据库中。我尝试实现 indexOF() 函数，但问题是 optionID 对于许多水果选项（1、2、3，...）是相同的。因此，如果我检查苹果的 indexOF() optionID，它可能 return 它已经 selected，即使它可能正在寻找香蕉的价值。

处理单选按钮验证的最佳方法是什么？保存单选按钮单击时 return 编辑的值的最佳方法是什么？

Answer 1

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

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

通过这种方式，checkFruitDescription.selected_id 包含 fruitID 和所选选项。您可以更进一步，对单选按钮的 ng-model 进行调整，使单选按钮起作用，而无需在控制器中编写任何代码：

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

现在 selectedArray 包含所有结果。请记住首先在控制器中创建 selectedArray。这是一个笨蛋： 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);
  }
}

使用 AngularJS 验证单选按钮

Validation on radio buttons with AngularJS

javascript

jquery

angularjs

json

monaca