2016-04-06 9 views
1

<tr>にng-repeatのテーブルがあります。最後に編集/削除リンクがあります。ユーザーが<tr>データ行にカーソルを置くと編集/削除のリンクが表示されます

<tr ng-repeat="form in allData | filter:search | orderBy: orderByValue : orderIn" ng-click="set_index($index)"> 
      <td><a ng-href={{form.link}}>{{form.ar_ref}}</a></td> 
      <td>{{form.title}}</td> 
      <td>{{form.category}} 
      <span ng-class="{'show_edit_link', $index==selected_index}"> 
       <button ng-click="showUpdate()">Update</button> 
       <button ng-click="showDelete()">Delete</button> 
      </span> 
      </td> 
     </tr> 

マイJSコントローラー:

pp.controller('formsListCtrl', ['$scope', '$http', function($scope, $http){ 

    $http.get('/php_user/formJSON.php').success(function(response){ 
    $scope.allData=response; 

    //Show hover edit links 
    $scope.selected_index = 0; 
    $scope.set_index = function(i){ //i is the $index that we will pass in when hover in the forms_admin.php 
     $scope.selected_index = i; 
    } 

CSS:

.edit_link_show{ 
    display: inline; 
} 
.edit_link{ 
    display: none; 
} 
+1

reguarのCSSが悪いのでしょうか? http://codepen.io/anon/pen/ONzVLL –

+0

oOo〜いい、賢い。 –

答えて

1

THER eは、ng-controllerの構文エラーです。これは、クラス名の後に発現させるための:する必要があります。また、$インデックスに等しくないselected_indexのための別のNGクラスの引数を設定したい:

<tr ng-repeat="form in allData | filter:search | orderBy: orderByValue : orderIn" ng-click="set_index($index)"> 
      <td><a ng-href={{form.link}}>{{form.ar_ref}}</a></td> 
      <td>{{form.title}}</td> 
      <td>{{form.category}} 
      <span ng-class="{'show_edit_link': $index==selected_index, 'edit_link': $index!=selected_index}"> 
       <button ng-click="showUpdate()">Update</button> 
       <button ng-click="showDelete()">Delete</button> 
      </span> 
      </td> 
     </tr> 
+0

いいえ、この構文の良い知らせは、ng-classが他のオブジェクトと同じkey:valueペアと同じ構造に従うオブジェクトと等しいことです。 –

関連する問題