gpt4 book ai didi

javascript - 动态创建元素的 Angular ng-hide

转载 作者:可可西里 更新时间:2023-11-01 13:02:21 24 4
gpt4 key购买 nike

我在 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);

}

但是当我点击第一行按钮时,两行的按钮都隐藏了,而按照逻辑它应该只针对第一行。

求助!!!

最佳答案

因为 ng-hide="hidepenality'+Id+'"不是正确的 Angular 表达。我认为 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,您可以在 Controller 上创建标志对象并使用它来跟踪显示/隐藏标志。

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>

关于javascript - 动态创建元素的 Angular ng-hide,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37496016/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com