在复选框上选择表格行值单击并在 angularjs 中的 div 上显示所选值

Question

我需要在复选框单击时选择表格中的一行并在 div 上显示选定的行值，因为我是 angularjs 的新手，无法弄清楚它是如何完成的。 我尝试使用过滤器选项，但没有工作，请协助任何感谢。

我的代码

     <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); 	}; 
                             
                              
             $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>