angularjs嵌套数组undefined

时间:2015-03-08 12:49:54

标签: javascript html arrays angularjs nested

我正在尝试使用angularjs创建一个twitter克隆。 目前,数据在数组中被模拟。

如何到达嵌套数组? 我找到的唯一错误是

  

"无法阅读财产'#'未定义"

该数组名为users,其中包含有关用户的所有数据,包括嵌套数组中的推文

或者有没有办法使用user [x] .name之类的东西来达到某个项目,其中x是数组索引

HTML看起来像这样:

<div ng-repeat="user in users">
<div class="row" >
    <div class="col-md-9">
        <fieldset>
            <legend>S0</legend>
            <img src="{{user.image}}" alt="no image" style="float:left;width:50px;height:50px;margin-right:20px;">
            <h1>{{user.name}}</h1>
        </fieldset>
    </div>
    <div class="col-md-3">
        <fieldset>
            <legend>S2 Details</legend>
            Name: {{user.name}}<br>
            Location: {{user.location}}<br>
            Web: {{user.web}}<br>
            Bio: {{user.bio}}
        </fieldset>
    </div>
    <div class="col-md-9">
        <fieldset>
            <legend>S1 Tweets</legend>
            <ul>
                <li ng-repeat="tweet in user.tweets">
                    {{user.name}}
                    {{user.tweet.date}}
                    <br>
                    {{users[1].tweet.text}}
                </li>
            </ul>
        </fieldset>
    </div>
    <div class="col-md-3">
        <fieldset>
            <legend>S3</legend>
        </fieldset>
    </div>
    <div class="col-md-3">
        <fieldset>
            <legend>S4 Following</legend>
        </fieldset>
    </div>
</div>

数据/数组的存储方式如下:

angular.module('myApp.tweets', ['ngRoute'])

    .config(['$routeProvider', function ($routeProvider) {
            $routeProvider.when('/tweets', {
                templateUrl: 'tweets/tweets.html',
                controller: 'tweetsCtrl'
            });
        }])

    .controller('tweetsCtrl', ['$scope', function ($scope) {
            $scope.users[
                    {id: "1",
                        name: "userAbc",
                        location: "hugecity",
                        web: "www.abc.nl",
                        bio: "Hey welcome on my profile",
                        image: "http://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg",
                        tweets: [
                            {date: "08/03/2015", text: "bericht 4"},
                            {date: "07/03/2015", text: "bericht 3"},
                            {date: "06/03/2015", text: "bericht 2"},
                            {date: "05/03/2015", text: "bericht 1"}
                        ]},
            {id: "2",
                name: "userDef",
                location: "hugecity",
                web: "www.abc2.nl",
                bio: "Hey welcome to my profile",
                image: "http://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg",
                tweets: [
                    {date: "08/03/2015", text: "bericht 4"},
                    {date: "07/03/2015", text: "bericht 3"},
                    {date: "06/03/2015", text: "bericht 2"},
                    {date: "05/03/2015", text: "bericht 1"}
                ]}
            ];
        }]);

2 个答案:

答案 0 :(得分:0)

您可以将$scope.users更改为以下代码:

  $scope.users = [
                {id: "1",
                    name: "userAbc",
                    location: "hugecity",
                    web: "www.abc.nl",
                    bio: "Hey welcome on my profile",
                    image: "http://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg",
                    tweets: [
                        {date: "08/03/2015", text: "bericht 4"},
                        {date: "07/03/2015", text: "bericht 3"},
                        {date: "06/03/2015", text: "bericht 2"},
                        {date: "05/03/2015", text: "bericht 1"}
                    ]},
        {id: "2",
            name: "userDef",
            location: "hugecity",
            web: "www.abc2.nl",
            bio: "Hey welcome to my profile",
            image: "http://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg",
            tweets: [
                {date: "08/03/2015", text: "bericht 4"},
                {date: "07/03/2015", text: "bericht 3"},
                {date: "06/03/2015", text: "bericht 2"},
                {date: "05/03/2015", text: "bericht 1"}
            ]}
        ];

答案 1 :(得分:0)

在$ scope.users

之后,您的类型缺少“=”
$scope.users=[
                    {id: "1",
                        name: "userAbc",
                        location: "hugecity",
                        web: "www.abc.nl",
                        bio: "Hey welcome on my profile",
                        image: "Hello",
                        tweets: [
                            {date: "08/03/2015", text: "bericht 4"},
                            {date: "07/03/2015", text: "bericht 3"},
                            {date: "06/03/2015", text: "bericht 2"},
                            {date: "05/03/2015", text: "bericht 1"}
                        ]},
            {id: "2",
                name: "userDef",
                location: "hugecity",
                web: "www.abc2.nl",
                bio: "Hey welcome to my profile",
                image: "kjh",
                tweets: [
                    {date: "08/03/2015", text: "bericht 4"},
       [enter link description here][1]             {date: "07/03/2015", text: "bericht 3"},
                    {date: "06/03/2015", text: "bericht 2"},
                    {date: "05/03/2015", text: "bericht 1"}
                ]}
            ];
        }]);

Plunker