javascript - 如何使用 angularjs 将多个选定值分配给文本字段

Question

我有一个来自 angularjs post 请求的动态文本字段值。根据响应文本字段将增加或减少。我想从多个选定的选项字段编辑该值。

Html 代码如下。

<tr ng-repeat="opt in myData">
     <td>
        <input type="text" id="opt{{$index + 1}}" name="option{{$index + 1}}"   ng-model="opt.options" ng-value="opt.options"  />
     </td>
     </tr>

这里有多个选择选项，基于我想要更改文本字段值的选择

下面给出了第一个选择的 HTML 代码

<select ng-model="garden" multiple="multiple">
  <option>Flowers</option>
  <option>Shrubs</option>
  <option>Trees</option>
  <option>Bushes</option>
  <option>Grass</option>
  <option>Dirt</option>
</select>

第二个选择 Html 代码如下所示

<select ng-model="country" multiple="multiple">
  <option>USA</option>
  <option>UK</option>
  <option>USR</option>
</select>

请任何人帮助我，我是 Angularjs 的新手。谢谢大家

Answer 1

您可以添加 ng-change 指令来在 Controller 中相应地选择和更新 myData。

<table>
  <tr ng-repeat="opt in myData">
    <td>
      <input type="text" id="{{opt.id}}" name="{{opt.id}}" value="{{opt.value}}" />
    </td>
  </tr>
</table>


<select ng-model="country" multiple="multiple" ng-change="selectChange(country)">
  <option>USA</option>
  <option>UK</option>
  <option>USR</option>
</select>

<select ng-model="garden" multiple="multiple" ng-change="selectChange(garden)">
  <option>Flowers</option>
  <option>Shrubs</option>
  <option>Trees</option>
  <option>Bushes</option>
  <option>Grass</option>
  <option>Dirt</option>
</select>

selectChange() 在 Controller 中

$scope.selectChange = function(val) {
      // selection logic goes here
      $scope.myData = []; // reset selections
      var id = $scope.myData.length;
      angular.forEach(val, function(v, k) { // iterate list and add new selections 
        $scope.myData.push({
          'id': id + k,
          'value': v
        });
      });
    };

http://jsfiddle.net/nxjtL7wa/2/