Question

我是Angular JS的新手。我确实找到了解决方案，但没有解决它。
根据下拉列表中的选定值，值应显示在相应的输入框中。

对于Eg：如果选择Basic，则应在ng-model item.rate中显示相应的值，即299 如果选择“高级”，则应在ng-model item.rate。

中显示对应值，即499

HTML：

<tbody>
 <tr ng-repeat="item in invoice.items ">
 <td><select  ng-model="item.names" ng-options="c.name for c in invoice.items track by c.id"></select></td>
<td><input type="text" ng-model="item.rate"/></td>
</tr>
 </tr>
  </tbody>

Angular JS：

$scope.invoice = {
            items: [{id:1,name:'Basic',rate:299},
                    {id:2,name:'Advanced',rate:499}
               ]};

我的代码无效。我无法找到问题。请帮助我。谢谢。

Answer 1

您可以使用ngOptions完整语法value as text for item in items将选项与item.rate绑定，请参阅documentation。

ng-options="c.rate as c.name for c in invoice.items track"

另外，我建议您避免将item.name绑定到select并绑定额外的文件以避免冲突。

参考下面的例子。

＆＃13;

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.selectedItem = '';
    $scope.invoice = {
      items: [{
          id: 1,
          name: 'Basic',
          rate: 299
        },
        {
          id: 2,
          name: 'Advanced',
          rate: 499
        }
      ]
    };
    $scope.show = function(item) {
      return item.name + '(' + item.rate + ')';
    }
  });

＆＃13;

<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="selectedItem" ng-options="c.rate as c.name for c in invoice.items"></select></td>
  <td><input type="text" ng-model="selectedItem" />
</div>

＆＃13;

Angular JS：在Dropdown中将Input值显示为Selected

1 个答案: