Question

我有一个Modal，左边有一个表，表中有所有Customers。右侧是输入字段。我需要用户能够单击Customer并使用Customer属性值填充输入字段。

我做了Plunkr

我的代码

 <table class=" table table-bordred table-striped table-hover">
      <tr><th style="font-weight: bold;">Customers</th></tr>
          <tbody>
              <tr ng-repeat="job in jobArray" class="pointer">
                  <td>{{job.Customers[0].CustomerName}}</td>
               </tr>
          </tbody>
  </table>

<div class="form-group">
   <div class="input-group">
      <span class="input-group-addon">C. Name</span>
      <input style="width:400px" ng-model="CustomerName"  type="text" />
    </div>
</div>

<div class="form-group">
     <div class="input-group">
          <span class="input-group-addon">C. Address</span>
          <input style="width:390px" ng-model="CustomerAddress" type="text">
 </div>

Answer 1

当然有很多方法可以做到。

最简单的方法是让他们使用相同的$scope进行通信，使用相同的控制器，

将ng-controller移至包含表格和字段的容器元素。
然后我会向selectedCustomer添加$scope，在您的控制器中，您可以使用$scope.selectedCustomer = $scope.customers[0];
然后更改输入的ng-model以使用selectedCustomer属性<input ng-model="selectedCustomer.customerAddress" ... />
现在我们需要更改selectedCustomer以匹配您单击的那个，您可以使用ng-click在单击元素时执行表达式。 <tr ng-click="setSelectedCustomer(customer)"。
这也意味着我们需要范围内的setSelectedCustomer函数，因此在控制器中你可以声明函数

$ scope.setSelectedCustomer = function（customer）{ $ scope.selectedCustomer = customer; }

这是一个笨蛋。

http://plnkr.co/edit/9SkOWYEQt5dAGPwKbEOW?p=preview

注意：不要向作用域添加内容，而是查看控制器别名并将内容添加到控制器实例。快乐的编码。

如何将Angular表选择绑定到输入字段

1 个答案: