Question

正如标题所暗示的那样，即使有一个精简的版本，我也似乎无法重复工作，有人可以看看

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: "joe@example.org",
                createdOn: 1397490980837
            }, {
                stars: 1,
                body: "This gem sucks.",
                author: "tim@example.org",
                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="angular.js@*"></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>

让我知道我哪里出错？

Answer 1

您没有正确连接到范围的宝石。

var gems = [

应该是

$scope.gems = [

您不需要以两种不同的形式声明它，这可能会在以后引起混淆。即如果你操纵var gems，范围对象不会更新，因此转发器不会更新。

如果必须以两种不同的形式声明它，而不是在var声明之后移动$ scope声明。

Answer 2

你可以这样使用

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: "joe@example.org",
                createdOn: 1397490980837
            }, {
                stars: 1,
                body: "This gem sucks.",
                author: "tim@example.org",
                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: "JimmyDean@example.org",
                createdOn: 1397490980837
            }, {
                stars: 4,
                body: "Any gem with 12 faces is for me!",
                author: "gemsRock@example.org",
                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: "turtleguyy@example.org",
                createdOn: 1397490980837
            }, {
                stars: 1,
                body: "BBW: High Shine != High Quality.",
                author: "LouisW407@example.org",
                createdOn: 1397490980837
            }, {
                stars: 1,
                body: "Don't waste your rubles!",
                author: "nat@example.org",
                createdOn: 1397490980837
            }]
        }
    ];
    $scope.gems = gems;
});

你不应该使用var gems = [

这样，当执行控制器时，对象不能放入数组。

其他方法可以将var gems对象逐个推送到$ scope.gems = []

ng-repeat未初始化

2 个答案: