Question

我是一个完全有角度的菜鸟，并尝试创建一个简单的测试应用程序。我想在局部读出一些用户数据。用户数据位于我的事件控制器中。我通过路由控制器导航到＃/ new后，将事件控制器分配给new.html partial中的表单。

我尝试遍历部分用户时遇到的错误是“错误：ngRepeat：iexp无效表达式”。我无法弄清楚如何通过这些用户进行重复播放。

有什么想法吗？

我的index.html：

    <div class="container"  style="width: 500px; margin: 0 auto;">
        <ul class="nav nav-pills" ng-controller="NavigationController as navigationCtrl">
            <li ng-class="{active: navigationCtrl.isActive(1)}">
                <a href="#/">Home</a>
            </li>
            <li ng-class="{active: navigationCtrl.isActive(2)}">
                <a href="#/new">Nieuw</a>
            </li>
            <li ng-class="{active: navigationCtrl.isActive(3)}">
                <a href="#/another">Nog een</a>
            </li>
        </ul>
        <div ng-view></div>
    </div>

我的new.html部分

<form action="" ng-controller="EventController as event">
    <div ng-repeat="users as user">
        <label>Name</label>
        <input type="text" class="form-control" name="name" ng-model="user.name">
        <br>
        <label>Emailaddress</label>
        <input type="email" class="form-control" name="email" ng-model="user.email">

        <br>
        <input class="btn btn-default" type="submit" ng-click="event.addEvent($event)" value="Klik">
    </div>
</form>

最后：我的角度代码

(function () {
    var app = angular.module('testApp', ['ngRoute']);

    app.controller('NavigationController', ['$scope', '$route', function ($scope, $route) {
        $scope.$route = $route;
        this.activeTab = 1;

        this.setActiveTab = function (tab) {
            this.activeTab = tab;
        };

        this.isActive = function (tab) {
            if ($route.current && $route.current.activeTab) {
                return $route.current.activeTab === tab;
            }

            return false;
        };
    }]);

    app.controller('EventController', ['$scope', '$controller', function ($scope, $controller) {
        this.users = [
            {name: 'aa'},
            {name: 'bb'}
        ];

        this.addEvent = function (e) {
            e.preventDefault();
            console.log(this);
        };

    }]);


    app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
        when('/new', {
            templateUrl: 'partials/new.html',
            controller: 'NavigationController',
            activeTab: 2
        }).
        when('/another', {
            templateUrl: 'partials/another.html',
            controller: 'NavigationController',
            activeTab: 3
        }).
        otherwise({
            redirectTo: '/',
            controller: 'NavigationController',
            activeTab: 1
        });
    }]);
})();

我尝试将此更改为$ scope无效。

Answer 1

您在ng-repeat部分页面中以错误的方式撰写new.html

它应该像

<强> new.html

<div ng-repeat="user in users">

Answer 2

您没有以正确的方式将 ng-repeat 改为：

 <div ng-repeat="user in users">

Answer 3

ng-repeat的正确语法是

<element ng-repeat="item in [1,2,3]">

如果您的集合中有重复的值，例如[1,1,1]，您也可以使用track by $index之类的内容。

参考。 https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 4

您的代码中存在一些问题。请将所有此引用更改为 $ scope ，然后快速修复以下html代码：

<div ng-repeat="user in users">

它应该可以工作，但也可以更新我。

Working demo for your reference (route codes excluded for demo purpose only)

感谢，阿肖克

ng-repeat抛出无效的表达式

4 个答案: