Question

我有动态添加行功能，每行有两个下拉列表。第二个下拉值是从JSON填充的，这些值是在第一个下拉列表中映射的。

我的要求是更改第一个下拉列表我需要将值分配给同一行中的第二个下拉列表。在这里，我遇到的问题是，一旦我在第一个下拉列表中更改了值，那么所有行中的所有下拉列值都会发生变化。

此外，我在这里为First Row下拉列表添加了Html代码。

<div class="firstdropdown">
    <select ng-change="getComponents">
        <option ng-repeat="kggrpItem in DesignGroupData track by $index" value={{kggrpItem}} ">{{kggrpItem}}</option>
    </select>
</div>
<div class="seconddrodown ">
   <select>
          <option ng-repeat="kggrpCmp in KgGroupCmpData"  value={{kggrpCmp}}>{{kggrpCmp}}</option>              
   </select>
</div>

示例控制器代码....

$scope.getComponents = function(){
    for(i=0;i<jsonstring.length;i++){
      $scope.dropdownvaluesArr = jsonvalues
    }
    $scope.KgGroupCmpData = dropdownvaluesArr 
}

请帮我解决问题。

Answer 1

尝试ne-model而不是使用ng-change，它会自动更改第二个下拉值。

<div id="fistDropdown">
  <span>fistDropdown</span>
  <select ng-model="selected">
    <option ng-repeat="option in selectlist track by $index" value={{option.key}}>{{option.value}}
    </option>
  </select>
</div>

<div id="secondDropdown">
<span>SecondDropdown</span>
  <select ng-model="selected">
    <option ng-repeat="option in selectlist" value={{option.key}}>{{option.value}}
    </option>
  </select>
</div>

并将所选值传递给ng-model，如下所示

 $scope.selected = '3';

我附上小提琴网址也请检查一下 clone select box

如何根据AngularJS中的第一个下拉选择框将值分配到第二个下拉列表中？

1 个答案: