チェックボックスでテーブルの行の値を選択し、anglejのdivで選択した値を表示

Question

チェックボックスでテーブルの行を選択する必要があります。角度ジェスを初めて知っているので、divに選択した行の値を表示してくださいどのようにそれを行うことができます。 フィルタオプションを使用しようとしましたが、うまくいきませんでした。

私のコード事前に

 <table ng-show="ad_tabl==1" id="data" border="1" class="table table-striped responsive-utilities jambo_table bulk_action" > 
    <thead> 
      <tr class="headings"> 
      <th><input type="checkbox" class=""/></th> 
      <th>Index X 10 table1</th> 
      <th>Steps</th> 
      <th>Distance(ft)</th> 
      <th>Distance....(m)</th></th> 
      </tr> 
    </thead> 

    <tbody> 
     <tr ng-repeat="ad1 in action_distance" > 
      <td class="a-center "> 
      <input ng-model="ad1.index" type="checkbox" class="tableflat_ad"/> 
      </td> 
      <td>{{ad1.index}}</td> 
      <td>{{ad1.steps}}</td> 
      <td>{{ad1.distance_ft}}</td> 
      <td>{{ad1.distance_m}}</td> 

     </tr> 

    </tbody>  
    </table> 
    <div> 
    //////// show row selected value here /////////// 
    </div> 

var app = angular.module('formExample', []) 
    .controller('ExampleController', ['$scope', function($scope) { 


     $scope.action_distance = [ 
{ 
index:"0", 
steps:  "<=2 in.(5cm.)", 
distance_ft:  "", 
distance_m:  "", 
},{ 
index:  "1", 
steps:  "Within Reach", 
distance_ft:  "", 
distance_m:  "", 
},{ 
index:  "3", 
steps:  "1-2 Steps", 
distance_ft:  "", 
distance_m:  "", 
} 
]; 
}]); 

感謝。

Answer 1

var app = angular.module('main', []); 
 
          app.controller('DemoCtrl', function ($scope,$filter) { 
 
      
 
          $scope.selectAll = function (a) { 
 
    angular.forEach($scope.action_distance, function (obj) { 
 
     obj.check = a; 
 
     
 
    }); 
 
          $scope.onchange(); 
 
    }; 
 
           $scope.test = {};   
 
           $scope.onchange=function() {        
 
      $scope.test = $filter('filter')($scope.action_distance, { check: true }, true); \t }; 
 
           
 
           
 
      $scope.action_distance = [ 
 
    { 
 
    index:"0", 
 
    steps:  "<=2 in.(5cm.)", 
 
    distance_ft:  "", 
 
    distance_m:  "", 
 
    },{ 
 
    index:  "1", 
 
    steps:  "Within Reach", 
 
    distance_ft:  "", 
 
    distance_m:  "", 
 
    },{ 
 
    index:  "3", 
 
    steps:  "1-2 Steps", 
 
    distance_ft:  "", 
 
    distance_m:  "", 
 
    } 
 
    ]; 
 
           
 
         }); 
 
        

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <div ng-app="main" ng-controller="DemoCtrl"> 
 
    <table id="data" border="1" class="table table-striped responsive-utilities jambo_table bulk_action" > 
 
     <thead> 
 
       <tr class="headings"> 
 
       <th><input type="checkbox" class="" ng-change="selectAll(master)" ng-model="master" ng-init="master=false;"/></th> 
 
       <th>Index X 10 table1</th> 
 
       <th>Steps</th> 
 
       <th>Distance(ft)</th> 
 
       <th>Distance....(m)</th></th> 
 
       </tr> 
 
     </thead> 
 

 
     <tbody> 
 
      <tr ng-repeat="ad1 in action_distance" > 
 
       <td class="a-center "> 
 
       <input type="checkbox" ng-change="onchange()" ng-model="ad1.check" /> 
 
        
 
       </td> 
 
       <td>{{ad1.index}}</td> 
 
       <td>{{ad1.steps}}</td> 
 
       <td>{{ad1.distance_ft}}</td> 
 
       <td>{{ad1.distance_m}}</td> 
 

 
      </tr> 
 

 
     </tbody>  
 
     </table> 
 
     <div> 
 
    <br/><br/> 
 
      <table border="1" > 
 
      <th>Index X 10 table1</th> 
 
      <th>Steps</th> 
 
      <th>Distance(ft)</th> 
 
      <th>Distance....(m)</th></th> 
 
      </tr> 
 
      <tr ng-repeat="ad1 in test" >    
 
      <td>{{ad1.index}}</td> 
 
      <td>{{ad1.steps}}</td> 
 
      <td>{{ad1.distance_ft}}</td> 
 
      <td>{{ad1.distance_m}}</td> 
 

 
     </tr> 
 
     </table> 
 
     </div> 
 
    </div>