2014-09-18 173 views
0

正如標題所暗示的,我似乎無法得到NG-重複工作,即使有一個精簡版,可能會有人來看看NG重複未初始化

http://plnkr.co/edit/ww2AIzOtO58TSqlnwbSG?p=preview

var app = new angular.module('myApp', [ 

]) 

.controller('GemsCtrl', function GemsCtrl($scope) { 

    $scope.gems = gems; 
    $scope.thisIsFine = "what gives?"; 
    var gems = [ 
     { 
      name: 'Azurite', 
      description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.", 
      shine: 8, 
      price: 110.50, 
      rarity: 7, 
      color: '#CCC', 
      faces: 14, 
      images: [ 
       "images/gem-02.gif", 
       "images/gem-05.gif", 
       "images/gem-09.gif" 
      ], 
      reviews: [{ 
       stars: 5, 
       body: "I love this gem!", 
       author: "[email protected]", 
       createdOn: 1397490980837 
      }, { 
       stars: 1, 
       body: "This gem sucks.", 
       author: "[email protected]", 
       createdOn: 1397490980837 
      }] 
     } 

和HTML ...

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

<head> 
    <script src="https://code.angularjs.org/1.3.0-rc.1/angular.js" data-semver="1.3.0-rc.1" data-require="[email protected]*"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body ng-controller="GemsCtrl"> 
{{thisIsFine}} 
    <table class="table table-striped"> 
    <thead> 
     <tr> 
     <th>Name</th> 
     <th>Description</th> 
     <th>view</th> 
     <th>Settings</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="gem in gems"> 
     <th>{{gem.name}}</th> 
     <th>{{gem.description}}</th> 
     <th> 
      <a class="btn" href="">view </a> 
     </th> 
     <th>Settings</th> 
     </tr> 
    </tbody> 
    </table> 
    <h1>Hello Plunker!</h1> 
</body> 

</html> 

,讓我知道我要去哪裏錯了嗎?

+0

移動'$ scope.gems =寶石;''後VAR寶石= [...]' – 2014-09-18 15:55:44

回答

0

您沒有正確連接到範圍的寶石。

var gems = [ 

應該

$scope.gems = [ 

你並不需要在兩個單獨的形式宣稱,這可能導致以後在和混亂。即如果你操縱var gems範圍對象沒有更新,因此中繼器不是。

如果必須在兩個單獨的表單中聲明它,而不是在var聲明之後移動$ scope聲明。

0

可以使用這種方式

var app = new angular.module('app', []).controller('GemsCtrl', function GemsCtrl($scope) { 

    $scope.gems = []; 
    $scope.thisIsFine = "what gives?"; 

    var gems = [ 
     { 
      name: 'Azurite', 
      description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.", 
      shine: 8, 
      price: 110.50, 
      rarity: 7, 
      color: '#CCC', 
      faces: 14, 
      images: [ 
       "images/gem-02.gif", 
       "images/gem-05.gif", 
       "images/gem-09.gif" 
      ], 
      reviews: [{ 
       stars: 5, 
       body: "I love this gem!", 
       author: "[email protected]", 
       createdOn: 1397490980837 
      }, { 
       stars: 1, 
       body: "This gem sucks.", 
       author: "[email protected]", 
       createdOn: 1397490980837 
      }] 
     }, 
     { 
      name: 'Bloodstone', 
      description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.", 
      shine: 9, 
      price: 22.90, 
      rarity: 6, 
      color: '#EEE', 
      faces: 12, 
      images: [ 
       "images/gem-01.gif", 
       "images/gem-03.gif", 
       "images/gem-04.gif" 
      ], 
      reviews: [{ 
       stars: 3, 
       body: "I think this gem was just OK, could honestly use more shine, IMO.", 
       author: "[email protected]", 
       createdOn: 1397490980837 
      }, { 
       stars: 4, 
       body: "Any gem with 12 faces is for me!", 
       author: "[email protected]", 
       createdOn: 1397490980837 
      }] 
     }, 
     { 
      name: 'Zircon', 
      description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.", 
      shine: 70, 
      price: 1100, 
      rarity: 2, 
      color: '#000', 
      faces: 6, 
      images: [ 
       "images/gem-06.gif", 
       "images/gem-07.gif", 
       "images/gem-09.gif" 
      ], 
      reviews: [{ 
       stars: 1, 
       body: "This gem is WAY too expensive for its rarity value.", 
       author: "[email protected]", 
       createdOn: 1397490980837 
      }, { 
       stars: 1, 
       body: "BBW: High Shine != High Quality.", 
       author: "[email protected]", 
       createdOn: 1397490980837 
      }, { 
       stars: 1, 
       body: "Don't waste your rubles!", 
       author: "[email protected]", 
       createdOn: 1397490980837 
      }] 
     } 
    ]; 
    $scope.gems = gems; 
}); 

不應使用VAR寶石= [

這樣對象所執行的控制器當不能投入陣列。

其他方式,你可以把VAR寶石對象到$ scope.gems = []一一