Angular：如何使用ngRepeat並設置默認單選按鈕選項？

-1

我檢查了this question，但它不是非常有用，因爲他們使用ng-repeat的方式不同。Angular：如何使用ngRepeat並設置默認單選按鈕選項？

This也沒有幫助。

我有一個表格：

<label ng-repeat="option in options"> 
    <input type="radio" ng-model="myObject.value" ng-value="option.key"> 
</label>

我的角度控制器：

options = { 
    key: 'Option 1' 
    val: 'Value 1' 
} 
$scope.myObject = { value: 'default option' }

我想這個設置默認的無線選項。發生什麼事是最後的option in list被設置爲默認值，不管我嘗試什麼。我確信我不明白這是爲什麼，所以我在這裏。

如何設置默認的收音機選項，以及我當前的配置有什麼問題？謝謝你的幫助。

來源

2015-03-24 Proto

的[角JS NG-重複一個單選按鈕從列表範圍與默認選中]（可能重複的http：//計算器。 com/questions/25389701/angular-js-ng-repeat-a-radio-button-list-scope-with-a-default-checked） – 2015-03-24 23:25:16

@MarkoGrešak謝謝，但我不知道那個例子是怎麼回事無論是和解決方案不工作。 – Proto 2015-03-24 23:34:12

如果要將myObject.value的值設置爲輸入的默認選項，則必須有該選項的選項。

演示：https://jsfiddle.net/2cb53pj3/

剛剛成立$scope.myObject.value與options陣列

來源

2015-03-24 23:52:33

這個例子似乎表明你說的不完全正確：https://docs.angularjs.org/api/ng/input/input%5Bradio%5D這個例子顯示來自3個不同地方的選項。也許你可以更好地解釋你在說什麼？ – Proto 2015-03-25 00:06:24

@Proto在鏈接示例中，輸入與'$ scope.color.name'綁定，該變量的值爲** blue **。因此，默認選擇的輸入是具有** blue **值的輸入。在你的例子中，你的輸入與'$ scope.myObject.value'綁定。因此，默認選擇的輸入將是匹配'$ scope.myObject.value'值的那個。此外，你的輸入被一個'option.key'數組填充，所以這就是語句的原因：「如果你想將'myObject.value'的值設置爲輸入的默認選項，那麼必須有一個選項那把鑰匙。「 – 2015-03-25 15:45:16

有了這個準備的鍵的匹配值，但對方的回答是我前遞交。您需要設置myObject.value以匹配您想要作爲默認值的option.key。

的script.js

(function() { 
angular.module('radioExample', []) 
    .controller('ExampleController', ['$scope', 
    function($scope) { 

     $scope.options = [{ 
     'key': 'Option 1', 
     'val': 'Value 1' 
     }, { 
     'key': 'Option 2', 
     'val': 'Value 2' 
     }, { 
     'key': 'Option 3', 
     'val': 'Value 3' 
     }]; 

     $scope.myObject = { 
     value: 'Option 2' 
     }; 
    } 
    ]); 
})();

的index.html

<!DOCTYPE html> 
<html ng-app="radioExample"> 

<head> 
    <script data-require="[email protected]*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body ng-controller="ExampleController"> 
    <form name="Options"> 
    <div ng-repeat="option in options"> 
     <label>{{option.key}}</label> 
     <input type="radio" ng-model="myObject.value" ng-value="option.key"> 

    </div> 
    Selected option is {{myObject.value}} 
    </form> 

</body> 

</html>

來源

2015-03-25 00:42:56 steveo

您還應該將數據格式化爲數組而不是對象，以便AngularJS遍歷它。 – steveo 2015-03-25 00:44:32

Angular：如何使用ngRepeat並設置默認單選按鈕選項？

回答

相關問題