[英]angular ng-hide for dynamic created element
我在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不會解析它。 你應該像下面的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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.