隐藏推流属性

Question

我已经在推送函数中添加了属性来隐藏标签并显示输入，但是当用户单击Save changes时，我想做相反的事情，即隐藏输入并显示标签。我正在使用ng-hide

  <tr ng-repeat="personalDetail in personalDetails">
    <td>
        <label ng-hide="personalDetail.lab" for="settings"> {{personalDetail.Sname}}</label>
        <input ng-show="personalDetail.lab" type="text" ng-model="personalDetail.Sname" />
    </td>
    <td>
        <label ng-hide="personalDetail.lab" data-val="{{personalDetail.Settings}}" for="desc">{{personalDetail.Settings}}</label>
        <input style="display:none" data-val="{{personalDetail.Settings}}" ng-model="personalDetail.Settings" type="text" value="{{personalDetail.Settings}}" />
        <input ng-show="personalDetail.lab" ng-model="personalDetail.Settings" type="text" value="{{personalDetail.Settings}}" />
    </td>
    <input type="button" class="btn btn-success pull-right btn-space" ng-click="save()" value="Save Changes" />

$scope.addNew = function () {
  $scope.personalDetails.push({
    'Sname': "",
    'Settings': "",
    'lab' : true 
  });

  $scope.save = function () {
    $scope.personalDetails.lab = false;
  }

Answer 1

因为$scope.personalDetails是一个数组，所以您必须使用索引访问每个属性。因此，循环遍历数组并更改lab属性。

  $scope.save = function () {
    for(var i=0;i<$scope.personalDetails.length;i++)
     $scope.personalDetails[i].lab = false;
  }

Answer 2

如果save按钮位于ng-repeat之外，并且您想要更改所有数组元素的lab属性，则只需对personalDetails数组使用map，如下所示：

$scope.save = function() {
  $scope.personalDetails = $scope.personalDetails.map(function(detail) {
    detail.lab = false;
    return detail;
  });
}

这将更新所有personalDetails对象。