angularjs - 如何填充html選擇元素選項基於原語不是模型

基本上，我有一個輸入控制元素，您可以輸入您擁有的蘋果總數，並根據我想設置最大數量的蘋果數量你可以製作迷你蘋果派（每1個蘋果可以製作1個迷你蘋果派）。 Angularjs文檔聲明使用ngOptions，但我只是想將它從一個原始模型（總數的蘋果）而不是一個模型。angularjs - 如何填充html選擇元素選項基於原語不是模型

所以，如果我具有2 totalApples值，那麼我希望有產生2個選項（具有值1和2的其它的值之一）

到目前爲止我的代碼如下所示：

HTML片段：

<input ng-model="totalApples" /> 
<select ng-options=""> 
    <option value="1">1</option> //what I would like to have is the options generated 
    <option value="2">2</option> 
</select>

在我控制我設定的範圍：

$scope.totalApples = 2;

謝謝

來源

2013-04-29 0--

如果你有興趣將選擇值你應該使用ng-options指令結合ng-model。看看this example。

另外，不要將您在檢查選項元素時看到的選項值混淆。 Angular確保正確的值綁定到您的模型。

來源

2013-04-29 17:33:49 Martin

謝謝你，馬丁，你的榜樣和評論。這是我想使用的方法，因爲它似乎是最直接的，同時仍然以Angularish方式解決我的問題（儘管可能推薦使用過濾器） – 2013-04-29 23:01:13

你會想要一個自定義函數來爲你生成選項。 AngularJS指令可以處理數據，其餘的由您決定。你的目標是提供它。

在你的控制器

$scope.options = []; 
$scope.generateOptions = function() { 
    newOptions = []; 
    for (var i = 1; i <= $scope.totalApples; i++) { 
    newOptions.push(i); 
    } 
    $scope.options = newOptions; 
}

而在你的HTML，你可以簡單地使用中繼器，因爲你並不真正需要這種簡單的場景選擇指令。

<input ng-model="totalApples" /> 
<select> 
    <option ng-repeat="option in options" value="{{option}}">{{option}}</option> 
</select> 
<button ng-click="generateOptions()">Generate options!</button>

來源

2013-04-29 17:24:50

此外，這裏是一個類似於你的使用過濾器的答案：http://stackoverflow.com/questions/11160513/angularjs-ng-options-create-range/11161353#11161353 – Rastapopulous 2013-04-29 18:01:20

這是一個整潔的方法:) – 2013-04-29 18:52:08

謝謝， RickCigarette，爲響應和鏈接，Rastapopulous，使用過濾器。這很有幫助 – 2013-04-29 21:32:39

angularjs - 如何填充html選擇元素選項基於原語不是模型

回答

相關問題