javascript - AngularJS:如何使不属于 ng-repeat 一部分的局部变量起作用

Question

我有一个应用程序，我正在接收 person 中的 person 对象列表，并迭代以动态构建表格。

代码如下所示:

<table>
  <tr ng-repeat = "personInfo in persons">
    <td>{{personInfo.name}}</td>
    <td>{{personInfo.gender}}</td>
    <td>
      <select ng-model="selected_address" ng-options="address.placename for address in personInfo.address"></select>
      <span ng-show="make_address_editable==false;">{{selected_address.address}}</span>
      <input type="text" style="width: 22em;" ng-show="make_address_editable" ng-model="selected_address.address" />
      <input style="margin-left: 2em;" type="button" value="{{btnValue}}" ng-show="selected_address" ng-click="make_address_editable=!make_address_editable; changeBtnValue($index)"/>
    </td>
  </tr>
</table>

我遇到困难的部分是如何为编辑/保存个人地址的每个人单独更改 input[type="button"] 或 {{btnValue}} 的值。我不想将其分配为 personInfo 对象上的属性，因为以后不需要它。在我的 Controller 中，我初始化了 make_address_editable 和 btValue 的值，但我只能控制每个人在 ng-click 上的 make_address_editable 的行为。如果我在 ng-click 上调用一个函数，该函数会根据用户单击的内容更改 btnValue，则会更改每行/人的 btnValue。

Controller 代码:

$scope.make_address_editable = false;
$scope.btnValue = 'Edit';
$scope.changeBtnValue = function(index){
  if ($scope.btnValue === 'Edit'){
    $scope.btnValue = 'Save';
  }
  else{
    $scope.btnValue = 'Edit';
  }
}

我不知道如何在方法中使用索引来更改表中每个人的btnValue。

任何帮助将不胜感激。

谢谢!

Answer 1

在 personInfo 对象中包含 btnValue 应该没有问题，因为这是一个 ViewModel，并且您实际上是根据该模型中的内容来驱动 View (按钮的值)。您稍后可能不会在将人员持久保存到数据存储时使用该值，但您的 View 肯定会不断使用它，因为它保持双向绑定(bind)同步。

您确实应该将 make_address_editable 放入您的 personInfo 模型中，因为我认为您不希望为每个人都有一个“全局”标志。直接在 $scope 上使用 make_address_editable 将阻止您逐个跟踪它。

如果你确实必须创建一个局部变量，你可以尝试这个。请参阅我从您的示例开始的 jsfiddle:

angular.module('coolApp', [])
    .controller('PersonCtrl', function ($scope) {
        $scope.persons = [{'name': 'Alex', 'gender': 'Male', 'address': [{'placename': 'Home', 'address': '1234 Dr'},{'placename': 'Office', 'address': '12345 Dr'}]}, {'name': 'Alexis', 'gender': 'Female', 'address': [{'placename': 'Home', 'address': '12345 Dr'},{'placename': 'Office', 'address': '123456 Dr'}]}];

    //$scope.make_address_editable = false;
    //$scope.btnValue = 'Edit';
    $scope.changeBtnValue = function (viewModel) {
        if (viewModel.editable === true) {
            viewModel.btnValue = 'Save';
        } else {
            viewModel.btnValue = 'Edit';
        }
    };
});

然后在中继器中使用 ng-init 来创建中继器范围本地的 viewModel 对象。这将防止您的人员发生变化:

<div ng-app="coolApp">
    <div ng-controller="PersonCtrl">
        <table>
            <tr ng-repeat="personInfo in persons" ng-init="viewModel={btnValue: 'Edit', editable: false}">
                <td>{{personInfo.name}}</td>
                <td>{{personInfo.gender}}</td>
                <td>
                    <select ng-model="selected_address" ng-options="address.placename for address in personInfo.address"></select> <span ng-show="viewModel.editable===false;">{{selected_address.address}}</span>

                    <input type="text" style="width: 22em;" ng-show="viewModel.editable" ng-model="selected_address.address" />
                    <input style="margin-left: 2em;" type="button" value="{{viewModel.btnValue}}" ng-show="selected_address" ng-click="viewModel.editable=!viewModel.editable; changeBtnValue(viewModel);" />
                </td>
            </tr>
        </table>
    <br><br>
    {{persons}}
    </div>
</div>