【问题标题】:How to dynamically generate ng-option in angularjs如何在angularjs中动态生成ng-option
【发布时间】:2017-03-31 03:20:29
【问题描述】:

在这里,它会从 json 中显示数量。根据数量值,选择选项需要动态生成如下。

【问题讨论】:

  • 反对者,请发表评论

标签: javascript html angularjs json ng-options


【解决方案1】:

您可以使用limitTong-options 来动态显示optionsselect 元素

希望我能得到你想要的。

angular.module("app", []).controller("myCtrl", function($scope) {
  $scope.selectedItem = 1;
  $scope.list = [1, 2, 3, 4];
  $scope.quantity = 1;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <select ng-model="quantity" ng-options="value as value for value in list"></select>
  <br>
  <select class="classname" ng-options="value as value for value in list | limitTo:quantity:0" ng-model="selectedItem">
    <!--<option ng-repeat="item in list | limitTo:quantity:0">{{item}}</option> -->
  </select>
  {{selectedItem}}
</div>

【讨论】:

  • @UI_Dev 因为limitTo 是正常的内置过滤器,所以将ng-repeat 更改为ng-options。希望它会接近你的问题。
【解决方案2】:

至于对问题的理解,您可以创建一个自定义过滤器来根据数量过滤掉选项。

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.obj =  {
    "list": [
        {
    "quantity": [
            2,
            3,
            4
          ]}
    ]}
})
.filter('cust',function(){
  return function(item){  
    var arr  = []
    for(var i =1; i<= parseInt(item); i++){
     arr.push(i)
    }

    return arr

  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div ng-repeat="q in obj.list">
 <div ng-repeat="i in q.quantity">
  <select ng-init="q.selectval[i] = i" class="classname" ng-model="q.selectval[i]" ng-options="value as value for (key,value) in i | cust" >
    
  </select> 
  {{q.selectval[i]}}
</div>
</div>
</div>

【讨论】:

  • 感谢 sachila 抽出宝贵时间。有没有办法通过使用 ng-selected 来预先选择下拉列表的第一个值
  • @UI_Dev 再次查看演示
  • 有没有办法在控制器中使用该过滤器?
  • @UI_Dev 检查这个例子jaliyaudagedara.blogspot.com/2015/07/…
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-30
  • 1970-01-01
  • 2020-06-15
  • 1970-01-01
  • 2017-01-21
  • 1970-01-01
相关资源
最近更新 更多