ngClassとng-repeatのクラスを追加した角のテーブル

Question

I WebサービスJSONから作成されたテーブルがあります。すべての行に、削除する行をマークするボタンがあります。行のボタンをクリックすると、JSのアラートに行要素のIDが表示されます。行に '危険'ブートストラップクラスも追加する必要があります。これで、ボタンをクリックしたときに行要素IDが表示され、後でWebサービスに送信するためにidをリストに追加できます。

これが私の見解です：

<table class="table table-condensed"> 
        <tr> 
         <th>#</th> 
         <th><a href="" ng-click="sortField = 'ordre'; reverse = !reverse">Prioritat</a></th> 
         <th><a href="" ng-click="sortField = 'nomAtribut'; reverse = !reverse">Atribut</a></th> 
         <th><a href="" ng-click="sortField = 'nomAtribut'; reverse = !reverse">Tipus</a></th> 
         <th><a href="" ng-click="sortField = 'midaAtribut'; reverse = !reverse">Mida</a></th> 
         <th><a href="" ng-click="sortField = 'atributObligatori'; reverse = !reverse">Obligatori</a></th> 
         <th><a href="" ng-click="sortField = 'observacions'; reverse = !reverse">Observacions</a></th> 
        </tr> 
        <tr ng-repeat="(key, value) in atrb"> 
         <td> 
          <a href="" ng-click="alert(value.idatributs_actiu)" ng-model="elimina"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> 
         </td> 
         <td> 
          <input type="number" ng-model="value.ordre" value="value.ordre" /> 
         </td> 
         <td> 
          <input type="value.valor" ng-model="value.nomAtribut" value="value.nomAtribut" /> 
         </td> 
         <td> 
          {{value.valor}} 
         </td> 
         <td> 
          <input type="value.valor" ng-model="value.midaAtribut" value="value.midaAtribut" /> 
         </td> 
         <td> 
          <input type="checkbox" ng-model="value.atributObligatori" value="value.atributObligatori" ng-true-value="'Si'" ng-false-value="'No'" /> 
         </td> 
         <td> 
          <input type="value.valor" ng-model="value.observacions" value="value.observacions" /> 
         </td> 
        </tr> 

コントローラ：

$scope.alert = function (index) { 
        $window.alert('click a borrar id: ' + index); // Show JS alert with id 
        $scope.addAtributsExistentsEliminar(index); // Add id to array, for later send it to WS 
        $scope.elimina = true; 
        $scope.class = 'danger'; 
       } 

私はngClassを使用してother examplesを次のようにそれをやろうとしてきたと私は何もないJSアラートを取得していますJSコンソールには何も表示されません。

編集：

私は完全なコントローラのコードを置く：

解決

// Edita tipus d'actius 
      assets.controller('EditaTipusCtrl', function ($scope, $http, $routeParams, $window) { 

        $scope.refresh = function() { 
         $http.get('http://10.0.203.73/WS/ws.php/tipusactius/getDetails/' + $routeParams.id).success(function (data) { 
          $scope.atrb = data; 
         }); 
        }; 

        $scope.alert = function (index, rowScope) { 
        // rowScope.class = 'danger'; 
         $window.alert('click a borrar id: ' + index); // Show JS alert with id 
         $scope.addAtributsExistentsEliminar(index); // Add id to array, for later send it to WS 
         $scope.elimina = true; 
         rowScope.addClass = 'danger'; 
        } 

        $scope.refresh(); 

        // Construeix combo per definir tipus atributs (String, Date, Text) 
        $http.get('http://10.0.203.73/WS/ws.php/getCombo/1').success(function (data) { 
         $scope.options = data; 
        }); 

        $scope.nousAtributs = []; 
        $scope.atributsExistentsEliminar = []; 

        $scope.addNewLine = function() { 
         var newRow = { 
          "nomAtribut": "", 
          "tipus": "", 
          "mida": '', 
          "prioritat": "", 
          "obligatori": "", 
          "observacions": "", 
          "nomTipusActiu": $routeParams.id // nom del tipus d'actiu 
         }; 
         $scope.nousAtributs.push(newRow); 
        } 

        $scope.addAtributsExistentsEliminar = function (id) { 
         $scope.atributsExistentsEliminar.push(id); 
        } 

        $scope.showAtributsEliminar = function(){ 
         angular.forEach($scope.atributsExistentsEliminar, $scope.show); 
        } 

        $scope.show = function (id) { 
         $http.get('http://10.0.203.73/WS/ws.php/tipusactius/edita/elimina/' + id + '.json').success(function (data) { 
          $scope.sts = data.status; 
          $window.alert($scope.sts); 
         }); 

         if ($scope.sts.status == 'IN_USE') { 
          $window.alert('Aquest atribut no es pot eliminar perque és en ús'); 
         } 

        } 

        $scope.saveChanges=function(){ 
         angular.forEach($scope.atrb, $scope.sendChanges); 
         angular.forEach($scope.nousAtributs, $scope.saveNewAttributtes); 
         $('#myModal').modal('show'); 
         $scope.refresh(); 
        } 

        $scope.sendChanges=function(atribut){ 
         $http.post('http://10.0.203.73/WS/ws.php/tipusactius/edita', atribut).success(function (data) { 
          $scope.atrb = data; 
         }); 
        } 

        $scope.saveNewAttributtes=function(atribut){ 
         $http.post('http://10.0.203.73/WS/ws.php/tipusactius/edita/nouatribut', atribut).success(function (data){ 
          $scope.atrb = data; 
         }); 
        } 

        $scope.removables = function() { 

        } 

       }); 

：

あなたの現在のコードは、それがとして働い ない理由である、親スコープを使用しようとしますあなたは期待した。スコープ内で警告の 機能に渡すことができます。だから、

... 
    <tr ng-repeat="(key, value) in atrb" ng-class="class"> 
     <td>  
     <a href="" ng-click="alert(value.idatributs_actiu, this)"... 

としてテンプレート

フィドルと

$scope.alert = function (index, rowScope) { 
    ... 
    rowScope.class = 'danger'; 
} 

- https://jsfiddle.net/y0rtLhyj/

Answer 1

あなたの現在のコードは、あなたが期待どおりに働いていない理由で親スコープを、使用しようとします。範囲内でalert関数に渡すことができます。だからあなたのテンプレートと

$scope.alert = function (index, rowScope) { 
    ... 
    rowScope.class = 'danger'; 
} 

... 
    <tr ng-repeat="(key, value) in atrb" ng-class="class"> 
     <td>  
     <a href="" ng-click="alert(value.idatributs_actiu, this)"... 

---

としてフィドル - 正しい方法があることを示し、あなたの valueオブジェクトに何かを持っているだろう、と述べた

---

https://jsfiddle.net/y0rtLhyj/削除されます。それを使ってng-classをドライブします。そうすれば、あなたのコントローラにはビューのプロパティ（例えばclass）がありません。