Question

我有一个用整数填充的选择

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

假设我有一组对象

  $scope.myCollection = [{"Color":"Red", "id":1},{"Color":"Blue", "id":2},
  {"Color":"Green","id":3}]

我想制作一个与集合中项目数绑定的选择

这可能看起来像这样

<select ng-model="$scope.myCollection.Count">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

我意识到像我上面的例子那样添加选项并不是真正的方法，但它得到我的问题。

Answer 1

使用PHP。你可以制作动态表格。一个可能看起来像这样：

<select>
<?php
    while ($i=0, $i < $scope.myCollection.count, $i++){
        echo "<option>{$i}</option>";
    }
?>
</select>

Answer 2

这基本上是相同的，但改为使用javascript。

function addOption(selectbox,text,value ){
    var optn = document.createElement("OPTION");
    optn.text = text;
    optn.value = value;
    selectbox.options.add(optn);
}

for (var i=0; i < someArray.length;++i){
    addOption(document.selectbox, someText, value);
}

我找到了动态javascript表单here.

的非常好的解释

Answer 3

你可以用这个

  <select ng-model="myCollection.length">
        <option ng-repeat="item in myCollection">{{$index+1}}</option>
    </select>

现场演示 http://jsfiddle.net/c5ssmqyj/7/

修改

这有一个问题，当你选择任何元素时，它会改变数组长度，显然你不想要。因此，最好的方法是保持计数变量或返回长度的计数函数

Answer 4

您可以使用ng-repeat将option绑定到集合

  <select>
   <option ng-repeat="item in myCollection">{{item.id}}</option>
  </select>

集合项目的id字段中包含您希望在下拉列表中显示的数字或其他内容

将ng-model绑定到select中的数组大小

4 个答案: