ng-repeat 中的 div 没有更新？

Question

我收到来自 http get 请求的响应，我正在使用响应来迭代数据

<div id="container" ng-app="myApp" ng-controller="myctrl">
     <div ng-repeat="profile in profiles">
          <p>{{profile.username}}</p>
     </div>
</div>

---

这是为了在点击时添加一个配置文件

<input ng-click="addProfile()" type="button" value="add Profile" />

---

这是我在控制器中的获取请求

var app = angular.module('myApp', []);
app.controller('myctrl', function($scope, $http) {
 $scope.profiles = [];
 $http.get("test1.json")
 .then(function(response) {
     $scope.profiles = response.data.profiles; //Response is provided below
 });
$scope.addProfile = function(){
      $http.get('test2.json')
     .then(function(response) {
       alert("af");
         $scope.items = response.data.profiles; //Response is provided below
         $scope.profiles.push($scope.items);
         console.log($scope.profiles); //gives the update Array

            });
        });
});

---

我的 test1.json 获取请求的响应

{
   "Id": "44442232",
    "profiles": [
        {
           "type": "Friend",
           "username": "Username 1",
         },
         {
            "type": "Student ",
            "username": "Username 2",
           }
       ]
   } 

---

我的 test2.json 获取请求的响应

{
   "Id": "44442232",
    "profiles": [
        {
           "type": "Friend",
           "username": "Username 4",
         },
         {
            "type": "Student ",
            "username": "Username 5"
           }
       ]
   } 

我在数组中更新后尝试了console.log。数组已更新但ng-repeat 中的div 没有更新？

Answer 1

请通过在末尾添加“)”来关闭您的 JSON 调用请求。除此之外没有错误，相同的代码对我来说很好。 // 代码在这里

var myApp = angular.module("myApp", []);
myApp.controller("myctrl", function($scope, $http) {

$http.get('test1.json')
 .then(function(response) {
   $scope.profiles = response.data.profiles; //Response is provided below
 });

   $scope.addProfile = function(){
     $http.get('test2.json')
     .then(function(response) {
         $scope.items = response.data.profiles; //Response is provided below
         angular.forEach($scope.items, function(value) {
           $scope.profiles.push(value);
         });
         console.log($scope.profiles);

     });

 };

});

请找到这个更新的 js 代码并检查。一旦它被修复，让我知道。快乐编码:)

Answer 2

首先，我认为您不需要 $scope.$apply() 来触发摘要循环。您处于角度上下文中。

其次，当您调用 .then() 时，您缺少一个 ')'。您目前有 '.then(function(){};'

第三，如果该属性是对象中的最后一个属性，则您的响应对象不应在用户名属性后有逗号。

您是否还有静默失败，或者是控制台中的错误，并且 ng-repeat 的已处理 html 为空白，或者您获得了角度插值语法 {{profile.username}}？