2017-06-30 3 views
0

ここではindex.htmlとsafeCtrl.jsコントローラです。私は、角度のスマートテーブルを実装するためにangularJSを使用しようとしています:[http://lorenzofox3.github.io/smart-table-website/][1]角はデータをバインドしていません

<!DOCTYPE html> 
<html ng-app="myApp"> 

<head> 
    <meta charset="utf-8" /> 
    <title></title>  
</head> 
<body> 
    <script src="Scripts/angular.min.js"></script> 
    <script src="Scripts/angular.js"></script> 
    <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    <script src="smart-table.debug.js"></script> 
    <script src="lrInfiniteScrollPlugin.js"></script> 

    <div ng-controller="safecCtrl"> 

     <button type="button" ng-click="addRandomItem(row)" class="btn btn-sm btn-success"> 
      <i class="glyphicon glyphicon-plus"> 
      </i> Add random item 
     </button> 

     <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped"> 
      <thead> 
       <tr> 
        <th st-sort="firstName">first name</th> 
        <th st-sort="lastName">last name</th> 
        <th st-sort="birthDate">birth date</th> 
        <th st-sort="balance">balance</th> 
       </tr> 
       <tr> 
        <th colspan="5"><input st-search="" class="form-control" placeholder="global search ..." type="text" /></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="row in displayedCollection"> 
        <td>{{row.firstName}}</td> 
        <td>{{row.lastName}}</td> 
        <td>{{row.birthDate}}</td> 
        <td>{{row.balance}}</td> 
        <td> 
         <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger"> 
          <i class="glyphicon glyphicon-remove-circle"> 
          </i> 
         </button> 
        </td> 
       </tr> 
      </tbody> 
     </table> 

    </div> 


</body> 
</html> 



    app.controller('safeCtrl', ['$scope', function ($scope) { 

    var firstnames = ['Laurent', 'Blandine', 'Olivier', 'Max']; 
    var lastnames = ['Renard', 'Faivre', 'Frere', 'Eponge']; 
    var dates = ['1987-05-21', '1987-04-25', '1955-08-27', '1966-06-06']; 
    var id = 1; 

    function generateRandomItem(id) { 

     var firstname = firstnames[Math.floor(Math.random() * 3)]; 
     var lastname = lastnames[Math.floor(Math.random() * 3)]; 
     var birthdate = dates[Math.floor(Math.random() * 3)]; 
     var balance = Math.floor(Math.random() * 2000); 

     return { 
      id: id, 
      firstName: firstname, 
      lastName: lastname, 
      birthDate: new Date(birthdate), 
      balance: balance 
     } 
    } 

    $scope.rowCollection = []; 

    for (id; id < 5; id++) { 
     $scope.rowCollection.push(generateRandomItem(id)); 
    } 

    //add to the real data holder 
    $scope.addRandomItem = function addRandomItem() { 
     $scope.rowCollection.push(generateRandomItem(id)); 
     id++; 
    }; 

    //remove to the real data holder 
    $scope.removeItem = function removeItem(row) { 
     var index = $scope.rowCollection.indexOf(row); 
     if (index !== -1) { 
      $scope.rowCollection.splice(index, 1); 
     } 
    } 
}]); 

私はビジュアルスタジオ2017を使用していました。データはバインドされていないため、今は奇妙です。誰もこれで私を助けることができますか?私は本当に混乱しています...ありがとう。

+0

oops、リンクは[スマートテーブル](http://lorenzofox3.github.io/smart-table-website/)です。 – Rachel

答えて

0

間違ったコレクションを繰り返しています。 rowCollectionであり、displayedCollectionでない必要があります。

関連する問題