将Object推送到数组不会反映ng-repeat

Question

我通过将MVC控制器返回的Json对象推送到Angular JS控制器中的数组来更新数组。

以下是代码sports-controller.js

portsApp.controller("SportsController", ["$scope","$http",function ($scope,$http) {
    $scope.data = { id: "rehmat" };
    $scope.sports = [];
    $scope.selectedSport ={};
    $scope.sportsObj = {};

    $scope.SportsModel = {};

    $scope.sport = {};

    $scope.remoteUrlRequestFn = function (str) {
        return { term: str };
    };

    function genericSuccess(res) {
        return res.data; // yes, really.
    }
    $scope.selectedSport = function (selected) {        
        $scope.sport =
            {
            title: selected.originalObject.name,
            parent_id: selected.originalObject.parent,
            sports_id: selected.originalObject.sports_id,
            user_id: selected.originalObject.uid

        }       
        $http.post("/usersports/post_sport", $scope.sport).then(function (data, status, headers, config) {           
            $scope.sports.push(genericSuccess(data).sport);
            console.log($scope.sports);
        });

    }

    $scope.UpdateSport = function (id) {
        if(id > 0)
        {
            $http.post("/usersports/update_sports", { user_sport_id: id }).then(function (data,status,headers,config){

                if(data.Success)
                {
                   alert(data.Message)
                }else
                {
                    alert(data.Message)
                }

            })
        }
    }


}
])

查看：

<div class="container sports-c" ng-app="SportsApp" >
    <!--ADD SPORTS TEXT-->
    <div class="col-lg-12" ng-controller="SportsController">
        {{sports}}
        <div class="add-sports-text  ">

            <h1 style="text-align:center;" class="animated jello">ADD SPORTS</h1>
            <hr style="width:30%">
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
            </p>
        </div>
        <div class="form-group" style="text-align:center;">
            <label for="search" style="text-align:center;"> SEARCH</label>
            <angucomplete-alt id="sports_input_box"
                              placeholder="Search Sports"
                              pause="400"
                              selected-object="selectedSport"
                              remote-url="/ajax/getSports"
                              remote-url-request-formatter="remoteUrlRequestFn"
                              remote-url-data-field="items"
                              title-field="name"                             
                              minlength="2"                        
                              input-class="form-control input-custom" />

            @*<input type="Search" placeholder="SEARCH" class="form-control input-custom" id="sports_input_box">*@
        </div>
    </div>
    <div class="col-lg-12">
        <div class="table-responsive">
           {{sports.length}}
             <table class="table  table-bordered " id="sports-table">
                 <tr>
                        <td>ID</td>
                        <td>SPORTS NAME</td>
                        <td>SELECT SKILL LEVEL</td>

                        <td>ACTION</td>
                    </tr>               
                <tbody>                               
                    <tr ng-repeat="item in sports">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td style="position: relative;top: 10px;">
                            <select class="example" name="" ng-change="updatePlayerSkill(item.id)" ng-bind="SportsModel.skill_level">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select>
                        </td>
                        <td class="icons-tab">
                            <a href=""><i class="fa fa-check-square-o" aria-hidden="true" ng-click="UpdateSport(item.id)"></i></a>
                            <a href=""><i class="fa fa-trash-o" aria-hidden="true" ng-click="RemoveSport(item.id)"></i></a>
                        </td>
                    </tr>
                    <tr ng-show="sports.length === 0"><td colspan="5">No Sports Added</td></tr>                
                </tbody>
            </table>
        </div>
    </div>
</div>

这是什么可能的解决方案，因为我通过推送元素更新数组而不反映？

我正在使用Angular Js 1.6，任何帮助都会非常感激。

请查看图片

Answer 1

尝试使用$ timeout 包围推送数组中元素的代码（不要忘记在控制器中注入$ timeout）。这将触发diggest循环并更新绑定，如here所示。

`

$http.post("/usersports/post_sport", $scope.sport).then(function (data, status, headers, config) {           
       $timeout(function(){ 
            $scope.sports.push(genericSuccess(data).sport);
            console.log($scope.sports);
       });
    });

`

Answer 2

错误是由于我在 angucomplete-alt 库中看到的，选定的参数可以是 null 。你需要处理：

$scope.countrySelected = function(selected) {
  if (selected) {
    window.alert('You have selected ' + selected.title);
  } else {
    console.log('cleared');
  }
};

关于你的主要问题。使用asynchronus请求时，可能会出现Angular $ digest 循环。尝试使用 $ scope.applyAsync（）包装array.push以刷新视图。