在 ng-repeat 中使用 ng-options

Question

我是 angular 的新手，我对这件事感到困惑。我正在尝试根据数组中的对象填充 select 框。我希望通过对该数组使用 ng-repeat 来 selectbox...但最初我需要在单击 add() 后只显示一个 selectbox 下一个 selectbox 必须出现。供参考：[最初必须有一个 selectbox]

HTML

<div class="col-lg-12" id="variant1" style="margin-top:10px" ng-repeat="variant in variants">
       <div class="col-lg-4" style="text-align:right;padding-top:2px;padding-right: 20px" >
          <label  for="variant1name">Variant Name</label>
       </div>

       <div class="col-lg-6" >
          <div   >
            <select class="form-control" ng-model="filterFormInputs.apps" ng-options="app.Application for app in variants" >
                <option value="" disabled selected>Select an Application</option> 
             </select>
             <label ng-repeat="checkbox in filterFormInputs.apps.details">
                <input class="ecomtexttype1" type="checkbox" ng-model="checkbox.checked"> {{checkbox.name}}
             </label>                
          </div>
       </div>         
     </div>

控制器:

$scope.variants =
[
    {"Application": "Color", "details":[{"name":"red"},{"name":"blue"},{"name":"black"}]},
    {"Application": "Color", "details":[{"name":"red"},{"name":"blue"},{"name":"black"}]},
    {"Application": "Color", "details":[{"name":"red"},{"name":"blue"},{"name":"black"}]}
]

Answer 1

我认为您可以让 add() 函数更新数组...如果配置正确，新行应该由于数组上的绑定而呈现。

如评论中所述，您没有提供足够的源代码，因此这里是假定的伪代码：

在 html 你可能

<button ng-click="$scope.add()">Add</button>

所以在控制器中

$scope.variants = [
  // array of whatever you are displaying
  {"foo":"bar1"},
  {"foo":"bar2"}
];

$scope.add = function() {
  variants.push({"foo":"bar_new"});
}

您是否考虑过为此使用指令？这可能会更好，具体取决于您的情况。看看这个：https://docs.angularjs.org/guide/directive

在 ng-repeat 中使用 ng-options

using ng-options within ng-repeat

javascript

angularjs

ng-repeat

angularjs-ng-repeat