Question

我正在使用angular和SPA创建ASP.NET Web API。我使用ui-router模块。我有一个列表视图，向客户显示一个编辑按钮，我希望通过该按钮将customerId传递给editCustomerController.js，以用于从网络API获取客户以进行编辑。我似乎无法解决这个问题。

CustomerView.html

<tr ng-repeat="customer in vm.customers">
  <td>{{$index + 1}}</td>
  <td>{{customer.identificationNumber}}</td>
  <td>{{customer.surname}}</td>
  <td>{{customer.otherName}}</td>
  <td>
     <a ui-sref="customerEdit" ng-click="vm.setSelectedCustomerId(customer.id)">
      <i class="fa fa-pencil-square-o"></i>
     </a>
  </td>
 </tr>

如何从此模板将customerId传递给editCustomerController.js？

Answer 1

我能够使用ui-sref =“customerEdit（{id：customer.id}）”解决我的问题，正如@New Dev所指出的那样。将 CustomerView.html 编辑链接更改为

<td>
   <a data-ui-sref="customerEdit({ id: customer.id })">
     <i class="fa fa-pencil-square-o"></i>
   </a>
</td>

customerEdit state

$stateProvider
     .state("customerEdit", {
         url: "/customers/edit/:id",
         templateUrl: "/editCustomerView.html",
         controller: "editCustomerController"
      })

editCustomerController.js

function editCustomerController($stateParams, customerResource) {
    var vm = this;
    vm.editableCustomer = {};
    vm.selectedCustomerId = $stateParams.id;

    customerResource.get({ id: vm.selectedCustomerId },
        function(data) {
            vm.editableCustomer = data;
            ...
        });
};

如何使用angular从列表视图模板传递数据以编辑视图模板

1 个答案: