Question

我是angularjs的新手。我需要通过将值从json响应推送到空数组来创建如下的数组。

数组我需要形成：

0:  [
    abc,
    juniordeveloper,
    engineer,
    development
  ]
1:  [
    xyz,
    juniordeveloper,
    engineer,
    development
  ]

但是我将所有值都放在一个数组中，如下所示

[
    abc,
    juniordeveloper,
    engineer,
    development,
    xyz,
    juniordeveloper,
    engineer,
    development
  ]

或

[2: Array[8]] => 0: abc
      1: juniordeveloper
      2: engineer
      3: development
      4: xyz
      5: juniordeveloper
      6: engineer
      7: development

我的控制器：

$scope.model.birthdays = []; // declared as global

            var getbirthdays = [];
            var show_birthdays = [];

                console.log("displayBirthdays");
                 if (response.json.response.statuscode != 0 && response.json.response.statusmessage !='Success') {
                     show_birthdays = response.json.response.statusmessage;
                     console.log("show_birthdays "+show_birthdays);
                     $scope.model.birthdays.push(show_birthdays);
                     console.log(show_birthdays);

                 }else {
                        console.log("Greeting response: "+response);
                     var resp = response;
                    show_birthdays = resp.json.response.greetings;
                    console.log(show_birthdays); 

                    for(var i=0; i<show_birthdays.length; i++){
                         console.log(show_birthdays.length);
                        $scope.model.birthdays.length = show_birthdays.length;
                        console.log($scope.model.birthdays.length);
                         $scope.model.name =show_birthdays[i].name;
                        console.log($scope.model.name); 
                        $scope.model.shortname=show_birthdays[i].shortname;
                        console.log($scope.model.shortname); 
                        $scope.model.role=show_birthdays[i].role;
                        console.log($scope.model.role); 
                        $scope.model.division=show_birthdays[i].division;
                        console.log($scope.model.division); 
                        $scope.model.profileurl=show_birthdays[i].profileurl;
                        console.log($scope.model.profileurl);


                        getbirthdays.push($scope.model.name);
                        getbirthdays.push($scope.model.shortname);
                        getbirthdays.push($scope.model.role);
                        getbirthdays.push($scope.model.division);
                        getbirthdays.push($scope.model.profileurl);
                        $scope.model.birthdays.push(getbirthdays);
                    }                   

                        console.log($scope.model.birthdays);
                }

            });

html页面

我正在使用ng-repeat逐个重复数组，但它不起作用。

<ul class="list-group">



<li class="list-group-item" ng-repeat="item in model.birthdays track by $index">
          <img class="imgsize pull-left" style="padding-right:4px" src={{model.profileurl}}/>
          <p class="list-group-item-text tsize text-left " >{{model.name}}<br>
         {{model.shortname}}<br>
         {{model.role}}<br>
         {{model.division}}</p></li>
      </ul>

我得到的输出是：

xyz
juniordeveloper
engineer
development

xyz
juniordeveloper
engineer
development

xyz
juniordeveloper
engineer
development

xyz
juniordeveloper
engineer
development

第一个值被第二个值替换，重复四次。

任何人都可以帮我显示如下输出。

abc
juniordeveloper
engineer
development

xyz
juniordeveloper
engineer
development

提前致谢。

Answer 1

您正在$ scope.getbirthdays

中线性推送所有内容

不要这样做，而是创建一个像itemToBePushed这样的对象，然后将其添加到范围变量中。

  for(var i=0; i<show_birthdays.length; i++){
     var itemToBePushed = {
         "name": show_birthdays.name,
         "shortname": show_birthdays.shortname,
         "role: "show_birthdays.role,
         "division": show_birthdays.division,
         "profileUrl": show_birthdays.profileUrl
     }

     $scope.model.birthdays.push(itemToBePushed);
  }
}

然后，应用ng-repeat，如：

   <li class="list-group-item" ng-repeat="item in model.birthdays track by $index">
      <img class="imgsize pull-left" style="padding-right:4px" src={{item.profileurl}}/>
      <p class="list-group-item-text tsize text-left " >{{item.name}}<br>
     {{item.shortname}}<br>
     {{item.role}}<br>
     {{item.division}}</p>
   </li>

乙

如何使用angularjs中的动态值创建单独的数组

1 个答案: