Question

我试图通过ng-click来获取表格中的信息。我有加载和排序，并正常工作的功能，但是我无法在两者之间切换。我的意思是，如果我点击加载，我无法排序，反之亦然。我想是因为我重置了每次点击的国家/地区，但我不确定如何识别它们如果我使用ng-repeat将它们放在不同的变量中请帮助!!

    <!DOCTYPE html>
      <html lang="en" ng-app="frontendTest">
      <head>
        <title>Frontend Test</title>
        <meta charset="utf-8"/> 

        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <link rel="stylesheet" type="text/css" href="resources/bootstrap/dist/css/bootstrap.min.css"> 

        <script type="text/javascript" src="resources/angular/angular.min.js"></script>
        <script type="text/javascript" src="resources/angular/angular-route.min.js"></script>
        <script type="text/javascript" src="app.js" ></script>
        <script type="text/javascript" src="controller.js" ></script>
      </head>
      <body ng-controller="CountriesController as countries">

        <header>
          <h1>Frontend Test</h1>  
          <div></div>
        </header>

        <section class="buttons">
          <input type="button" value="Load Countries" ng-click="load()">
          <input type="button" value="Sort Countries" ng-click="sort()">
        </section>

        <table class="table">
          <thead>
            <tr>
              <th class="col-md-6">Name</th>
              <th class="col-md-6">Population</th>
            </tr> 
          </thead>
         <tbody>
           <tr ng-repeat="country in countries track by $index" >            
             <td class="col-sm-6">{{country.country}}</td>
             <td  class="col-sm-6">{{country.population}}</td>
           </tr>
         </tbody>
        </table>                        
      </body>
    </html>

angular
  .module("frontendTest",[])
  .controller("CountriesController", CountriesController);

  CountriesController.inject =['$scope'];

  function CountriesController($scope){

    $scope.data = 
    [
      {"country" : "Aruba", "population" : 103000},
      {"country" : "Afghanistan", "population" : 22720000},
      {"country" : "Angola", "population" : 12878000},
      {"country" : "Anguilla", "population" : 8000},
      {"country" : "Albania", "population" : 3401200},
      {"country" : "Andorra", "population" : 78000},
      {"country" : "Netherlands Antilles", "population" : 217000},
      {"country" : "Zimbabwe", "population" : 11669000}
    ];

    $scope.countries= [];
    $scope.sorted = [];
    $scope.loaded = false;

    $scope.load = function (){
      //show all CountriesController and population
      console.log("LOAD");
      $scope.loaded = true;
      for(var i = 0; i < Object.keys($scope.data).length; i++){
        $scope.countries.push($scope.data[i]);
        // console.log($scope.countries);
      }
    }

    $scope.sort = function (){
      // if($scope.loaded === true){
      console.log("SORT");
      $scope.sortByCountry = $scope.data.slice(0);  
      $scope.sortByCountry.sort(function(a,b){
        //isolate countries and population sort by name            
        var x = a.country;
        var y = b.country;

        return x < y ? -1 : x > y ? 1 : 0;
      });

      for(var i = 0; i < $scope.sortByCountry.length; i++){
        // console.log($scope.sortByCountry[i]);  
        $scope.countries.push($scope.sortByCountry[i]);
        console.log($scope.sortByCountry[i]);

      } 
      // }
    }
  }

Answer 1

问题在于，当您对其进行排序并保持原样时，您将附加到现有阵列。我已经简化了您的代码，它应该按照您的意愿工作。您还可以使用AngularJS中的orderBy助手来减少代码量。

＆＃13;

angular
  .module("frontendTest",[])
  .controller("CountriesController", CountriesController);

  CountriesController.inject =['$scope'];

function CountriesController($scope){

   $scope.data = 
   [
  {"country" : "Aruba", "population" : 103000},
  {"country" : "Afghanistan", "population" : 22720000},
  {"country" : "Angola", "population" : 12878000},
  {"country" : "Anguilla", "population" : 8000},
  {"country" : "Albania", "population" : 3401200},
  {"country" : "Andorra", "population" : 78000},
  {"country" : "Netherlands Antilles", "population" : 217000},
  {"country" : "Zimbabwe", "population" : 11669000}
  ];

  $scope.countries= [];
  $scope.sorted = [];
  $scope.loaded = false;

  $scope.load = function (){
    $scope.loaded = true;
    // Cloning data
    $scope.countries = JSON.parse(JSON.stringify($scope.data));
  }



  $scope.sort = function (){
    if($scope.loaded === true){ 
      $scope.countries.sort(function(a,b){
        var x = a.country;
        var y = b.country;

        return x < y ? -1 : x > y ? 1 : 0;
      });
    }
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="frontendTest" ng-controller="CountriesController as countries">

        <header>
          <h1>Frontend Test</h1>  
          <div></div>
        </header>

        <section class="buttons">
          <input type="button" value="Load Countries" ng-click="load()">
          <input type="button" value="Sort Countries" ng-click="sort()">
        </section>


        <table class="table">
          <thead>
            <tr>
              <th class="col-md-6">Name</th>
              <th class="col-md-6">Population</th>
            </tr> 
          </thead>
         <tbody>
           <tr ng-repeat="country in countries track by $index" >

             <td class="col-sm-6">{{country.country}}</td>
             <td  class="col-sm-6">{{country.population}}</td>
           </tr>
         </tbody>
        </table>


        </body>

＆＃13;

如何在已加载ng-click angular

1 个答案: