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

时间:2016-12-02 14:08:28

标签: javascript jquery angularjs

我有来自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的任何人帮助我。谢谢大家

1 个答案:

答案 0 :(得分:1)

您可以添加ng-change指令,以便在控制器中相应地选择和更新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()

$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/