angularjs - 如何仅显示选中复选框的数据

Question

这里我想通过 $http 显示姓名、国家/地区值，数据显示在表格中这很好，但是当我选中该表格中的任何复选框时我想显示姓名，所选复选框的国家/地区值。我该怎么做？

var app = angular.module("myApp", []);
app.controller("homeCtrl", function($scope, $http) {
  $http.get("https://www.w3schools.com/angular/customers.php").then(function(response) {
    $scope.myData = response.data.records;
  });

  $scope.showDetails = function(indexVal, values) {
    var getDataValue = {};
    if (values) {
      alert($scope.myData.records.Name[indexVal]);
    }
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div style="width:100%;" ng-app="myApp" ng-controller="homeCtrl">
  <div style="width:50%; float:left;">
    <table style="width:100%" class="table-responsive table-bordered ">
      <tr>
        <th class="text-center">Index</th>
        <th class="text-center">Name</th>
        <th class="text-center">Country</th>
        <th class="text-center">Select</th>
      </tr>
      <tr ng-repeat="x in myData">
        <td class="text-center">{{$index+1}}</td>
        <td class="text-center">{{x.Name}}</td>
        <td class="text-center">{{x.Country}}</td>
        <td class="text-center"><input type="checkbox" ng-checked="chkVal1" ng-model="chkVal" ng-change="showDetails($index, chkVal)" /></td>
      </tr>
    </table>
  </div>
  <div style="width:50%; float:left; padding-left:1%;">
    i want to show Name and Contry for selected Checkbox only
  </div>
</div>

Answer 1

检查一下，它有效:

(代码解释如下)。

var app = angular.module("myApp", []);
app.controller("homeCtrl", function($scope, $http) {
  $scope.getDataValue = [];
  $http.get("https://www.w3schools.com/angular/customers.php").then(function(response) {
    $scope.myData = response.data.records;
  });

  $scope.showDetails = function(data) {
    
    if ($.inArray(data, $scope.getDataValue) === -1) {
      $scope.getDataValue.push(data);
    } else {
      var index = $scope.getDataValue.indexOf(data)
      $scope.getDataValue.splice(index, 1);
    }
    console.log($scope.getDataValue);
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div style="width:100%;" ng-app="myApp" ng-controller="homeCtrl">
  <div style="width:50%; float:left;">
    <table style="width:100%" class="table-responsive table-bordered ">
      <tr>
        <th class="text-center">Index</th>
        <th class="text-center">Name</th>
        <th class="text-center">Country</th>
        <th class="text-center">Select</th>
      </tr>
      <tr ng-repeat="x in myData">
        <td class="text-center">{{$index+1}}</td>
        <td class="text-center">{{x.Name}}</td>
        <td class="text-center">{{x.Country}}</td>
        <td class="text-center"><input type="checkbox" ng-checked="chkVal1" ng-model="chkVal" ng-change="showDetails(x)" /></td>
      </tr>
    </table>
  </div>
  <div style="width:50%; float:left; padding-left:1%;">
    <b>Selected Name and Country</b>
    <div ng-repeat="x in getDataValue">
      {{x.Name}} - {{x.Country}}

    </div>
  </div>

解释

函数 showDetails(x) 在选中/取消选中复选框时触发。 参数 x 是您在该实例中按下的数组中的一个对象。

然后，它检查对象(即数据)是否存在于数组(即 $scope.getDataValue)中。 if ($.inArray(data, $scope.getDataValue) === -1)

如果不存在，它只是将数组中的对象压入并显示数组。

否则，它会删除未选中的对象并显示剩余的数组。