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"
    }]
}]

因此，例如，该列表可以包含随机数量的水果项目，并且每个水果可以具有与其相关联的随机数量的选项。 E.g。

- Apple（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 的值（这是最好的选项吗？）。但是，我需要验证单选按钮 - 所以如果用户选择苹果的选项但后来改变了主意，我需要更新当前存储的值。

在我的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 相匹配变得非常困难
如果用户改变主意并为例如选择新的选项ID Apple，那么旧的价值仍然存在于数据库中。我试图实现indexOF（）函数，但问题是 optionID 对于很多水果选项（1,2,3，...）都是一样的。因此，如果我检查苹果的indexOF（） optionID ，它可能会返回它已被选中，即使它可能正在查找香蕉的值。

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

Answer 1

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

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

这样checkFruitDescription.selected_id同时包含fruitID和selected选项。您可以更进一步，调整单选按钮的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验证单选按钮

2 个答案: