Question

<body ng-app>
    <ul ng-controller='appcontrol'>
        <li ng-repeat="item in items">{{item.name}}</li>
    </ul>
</body>

http://jsfiddle.net/yd4VS/2/

尝试使用ng-controller检索项目对象的名称，没有运气

Answer 1

您的JS语法不正确。试试这个：

function appcontrol($scope){
    $scope.items = [{
        'name': 'shoe',
        'color' : 'blue',
        'price': '200',
    }];
}

请注意，我已将items包裹在数组[]中，并且您错过了=个符号。另外，非常重要的是，在jsFiddle上，angular只能用于 No Wrap - 在<head> 框架下设置＆amp;扩展。

请参阅更新的小提琴：http://jsfiddle.net/hzU7y/

编辑：以下是包含更多项目的数组示例：

$scope.items = [
    {
        'name': 'shoe',
        'color' : 'blue',
        'price': '200',
    },
    {
        'name': 'shirt',
        'color' : 'pink',
        'price': '150',
    },
    {
        'name': 'shorts',
        'color' : 'denim',
        'price': '120',
    }
];

这可能是使用ng-repeat的最自然的方式，因为它重复了一个集合。或者，您可以使用键值对执行类似于注释中提到的操作：

HTML：

<body ng-app>
    <ul ng-controller='appcontrol'>
        <li ng-repeat="(id, item) in items"> //<- note difference in the ng-repeat tag
            {{ item.color }} {{ item.name }} at $ {{ item.price }}
         </li>
    </ul>
</body>

JS：

function appcontrol($scope){
$scope.items = {
    'item1' : {
        'name': 'shoe',
        'color' : 'blue',
        'price': '200',
    },
    'item2' :{
        'name': 'shirt',
        'color' : 'pink',
        'price': '150',
    },
    'item3' :{
        'name': 'shorts',
        'color' : 'denim',
        'price': '120',
    }};
}

Answer 2

我和SimonC做了同样的事情，但是进行了另一次清理并添加了推荐的ng-app名称

HTML：

<body>
  <div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
    <ul ng-controller='appcontrol'>
      <li ng-repeat="item in items">{{item.name}}</li>
    </ul>
  </div>
</body>

和js：

var app = angular.module('MyApp',[]);

app.controller("AppController", function($scope){
    $scope.items{
        'name': 'shoe',
        'color' : 'blue',
        'price': '200';
    }
});

http://jsfiddle.net/yd4VS/4/

我的angularjs ng-repeat不适用于控制器

2 个答案: