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)

如果不存在，它只是将对象推入数组并显示该数组。

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

如何仅显示所选复选框的数据

1 个答案:

说明