Как я могу показать данные только для выбранного флажка

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)

Если он отсутствует, он просто помещает объект в массив и показывает массив.

Иначе, он удаляет объект, который не отмечен, и показывает оставшийся массив.