角度ng-hide用于动态创建的元素

时间:2016-05-28 06:37:43

标签: javascript html angularjs angularjs-directive angularjs-scope

我在UI上有一些动态创建的HTML表。有一种情况,当用户点击表格行中的按钮时,该按钮将隐藏自身并显示一些div元素。我使用了ng-show和ng-hide属性。但它没有按预期工作。

表:

Id   Column1     Column2    Action
1    somevalue  somevalue  <Button>
2    somevalue  somevalue  <Button>

按钮元素的Html :(其中Id是表格第一列值)

<button ng-show="hidepenality' + Id + '" type="button" class="btn btn-primary btn-xs" ng-model="btnChangePenality" ng-click="ChangePenalityButton(' + Id + ')" >Change Penality</button>

单选按钮div的Html :(其中Id是表格第一列值)

<div ng-hide="hidepenality'+Id+'"><label class="c-radio" data-ng-repeat="panalityType in penalityTypeList"><input type="radio" name="typepenality" data-ng-model="typepenality.Id" data-ng-value="{{panalityType.Id}}" /><span>{{panalityType.Type}}</span></label> </div>

现在,当我点击第一行按钮时,逻辑应该只隐藏第一行按钮并且只显示第一行无线电div(默认为隐藏)。以下是我的逻辑:

  $scope.ChangePenalityButton = function (Id) {

                var scope = $parse('hidepenality' + Id)
                scope.assign($scope, false);

        }

但是当我点击第一行按钮时,按钮会隐藏两个行,当它按照逻辑应该只是第一行时。

请帮忙!!!!

1 个答案:

答案 0 :(得分:3)

因为ng-hide =“hidepenality'+ Id +'”不是正确的角度表达式。我认为angular不会解析它。你应该像下面的snipper一样。基本上将标志设置为每一行,然后将此标志值从true更改为false等等。

angular.module('app', []);

angular.module('app').controller('Example', function () {
  this.rows = [
    {name: 'blah1', buttonShown: true},
    {name: 'blah2', buttonShown: true},
    {name: 'blah3', buttonShown: true}
  ];
});
table {
  border: 1px solid black;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>

<div ng-app="app" ng-controller="Example as Example">
  <table>
    <tr ng-repeat="row in Example.rows">
      <td>{{row.name}}</td>
      <td>
        <button ng-show="row.buttonShown" ng-click="row.buttonShown = false">hide</button>
        <div ng-hide="row.buttonShown">
          some div <br>
          <button ng-click="row.buttonShown = true">show</button>
        </div>
      </td>
    </tr>
  </table>
</div>

编辑: 要回答你的评论,这很有趣,因为它确实在这里失败了:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app>
  <button ng-click="hidepenality'+Id+'">error here</button>
</div>

对于动态数据,如何创建数组并不重要,如果您愿意,可以为每个值添加属性。 如果您不想这样做,还有其他解决方案,假设每行都有唯一的ID,您可以在控制器上创建标志对象并使用它来跟踪显示/隐藏标志。

angular.module('app', []).controller('Example', function () {
  this.flags = {};
  
  this.rows = [
    {name: 'blah1', id: 102},
    {name: 'blah2', id: 4},
    {name: 'blah3', id: 3}
  ];
});
table {
  border: 1px solid black;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>

<div ng-app="app" ng-controller="Example as Example">
  <table>
    <tr ng-repeat="row in Example.rows">
      <td>{{row.name}}</td>
      <td>
        <button ng-hide="Example.flags[row.id]" ng-click="Example.flags[row.id] = true">hide</button>
        <div ng-show="Example.flags[row.id]">
          some div <br>
          <button ng-click="Example.flags[row.id] = false">show</button>
        </div>
      </td>
    </tr>
  </table>
</div>