使用AngularJS驗證單選按鈕

Question

我有一個使用AngularJS，Monaca和Onsen UI的跨平台應用程序。

在我的一個視圖中，我有一個列表項數組，每個列表項可以具有與之關聯的隨機數量的單選按鈕。

list數組是在運行時根據通過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匹配變得非常困難
• 如果用戶改變主意並為Apple選擇新的optionID，則舊值仍保留在數據庫中。 我嘗試實現indexOF（）函數，但是問題是，對於許多水果選項（1、2、3，...）， optionID都是相同的。 因此，如果我檢查了Apple的indexOF（） optionID ，即使它正在查找Bananas的值，它也可能返回它已被選擇的狀態。

處理單選按鈕驗證的最佳方法是什么，保存單選按鈕單擊返回的值的最佳方法是什么？

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