【问题标题】:hide property of a push隐藏推送的属性
【发布时间】:2018-01-15 16:56:21
【问题描述】:

我在推送函数中添加了属性来隐藏标签并显示输入,但是当用户单击保存更改时,我想做相反的事情,即隐藏输入并显示标签。我正在使用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;
  }

【问题讨论】:

  • 请花时间正确格式化您的问题。这是一个难以理解的混乱开始
  • 用于保存的输入是否在 ng-repeat 中?
  • 没有它的外面,我只是在这里展示了它
  • lab 是真的我想在用户点击保存更改以隐藏输入并显示标签时将其设为假
  • @Aftabkhan 您要更改所有详细信息对象的lab 属性吗?

标签: javascript jquery angularjs arrays object


【解决方案1】:

如果save 按钮在ng-repeat 之外,并且您想更改所有数组元素的lab 属性,则只需在personalDetails 数组上使用map,如下所示:

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

这将更新所有personalDetails 对象。

【讨论】:

    【解决方案2】:

    由于$scope.personalDetails 是一个数组,您必须使用索引访问每个属性。因此,遍历数组并更改实验室属性。

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

    【讨论】:

      猜你喜欢
      • 2017-01-28
      • 2010-10-15
      • 1970-01-01
      • 1970-01-01
      • 2014-10-26
      • 2012-07-01
      • 2012-11-21
      • 2018-07-15
      • 2023-03-08
      相关资源
      最近更新 更多