angularjs - Angular JS：将输入值显示为在下拉列表中选择

Question

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

例如：如果选择了Basic，则ng-model item.rate 中应显示相应的值即299 如果选择Advanced，则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>

角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，请参阅文档。

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

此外，我建议您避免绑定和绑定额外的文件以避免冲突item.name。select

请参阅下面的示例。

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 + ')';
    }
  });

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