ダイナミックに作成された要素のための角度ng-hide

Question

動的に作成されるUI上にいくつかのHTMLテーブルがあります。ユーザーがテーブル行のボタンをクリックすると、そのボタンが非表示になり、いくつかのdiv要素が表示されます。ng-showおよびng-hideプロパティを使用しています。しかし、それは望むように動作していません。

表：ボタン要素の

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

HTML：（IDがテーブルの最初の列の値）は、HTMLラジオボタンDIVの

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

：（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> 

ここで、最初の行のボタンをクリックすると、ロジックは最初の行のボタンだけを非表示にしてdisp最初の行のradio div（デフォルトでは非表示になっています）を配置します。以下は私のロジックです：

$scope.ChangePenalityButton = function (Id) { 

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

     } 

しかし、私はときにすべきであるだけでロジックあたりとして最初の行のために、ボタンは、両方の行のために隠れている最初の行]ボタンをクリックしています。

助けてください!!!!

Answer 1

ng-hide = "hidepenality '+ Id +'は正しい角度表現ではないためです。私は角度がそれを解析できるとは思わない。あなたは下のスナッパーのようにそれを行うべきです。基本的にすべての行にフラグを設定し、このフラグ値を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>

動的なデータについては、それはありません：それは確かここで失敗したcosを あなたのコメントに答えるために、それは面白いです配列の作成方法に関係なく、各valにプロパティを追加できますもしそうなら、ue。 これをしたくない場合は、各行に一意の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>