Question

我有两个表通过angularJs渲染数据，来自2 c＃方法。这些表的结构几乎完全相同。下面的第一个用作I searchfield，另一个用于基本上用于呈现名称。我的问题是，第一个工作完美，但另一个不工作。而且我没有看到问题所在。任何帮助，将不胜感激。 //谢谢！

这是我的两张桌子。（第一个是工作）

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
            <div ng-app="searchApp">
                <div ng-controller="searchController">

                    @*first table works*@
                    <span style="color: white">Search:</span> <input data-ng-click="myFunction()" ng-model="searchText">
                    <table style="color: white" id="searchTextResults">
                        <tr><th>Name</th></tr>
                        <tr ng-show="!!searchText.length != 0" ng-repeat="friend in friends | filter:searchText">
                            <td data-id="{{friend.id}}" data-ng-click="SendFriendRequest(friend.id)">{{friend.id.replace("RavenUsers/","")}}</td>
                        </tr>
                    </table>



                    @*Does not work*@
                    <input type="button" value="Get friends requests" data-ng-click="GetFriendRequests()">
                    <table style="color: white">
                        <tr><th>Friend requests</th></tr>
                        <tr ng-repeat="friendRequest in friendRequests">
                            <td data-id="{{friendRequest.UserWhoWantsToAddYou}}" data-ng-click="acceptUserRequest(friendRequest.UserWhoWantsToAddYou)">{{friendRequest.UserWhoWantsToAddYou}}</td>
                        </tr>
                    </table>
                </div>
            </div>

这是我的脚本

                <script>
                var App = angular.module('searchApp', []);

                App.controller('searchController', function ($scope, $http) {

                    //Get all users to the seachFunction
                    $scope.myFunction = function () {
                        var result = $http.get("/Home/GetAllUsersExeptCurrentUser");
                        result.success(function (data) {

                            $scope.friends = data;

                        });
                    };


                    //Get friendRequests from other users
                    $scope.GetFriendRequests = function () {
                        var result = $http.get("/Home/GetFriendRequests");
                        result.success(function (data) {

                            $scope.friendRequests = data;


                        });
                    };
                });

            </script>

第一个名为myFunction的脚本函数非常完美，来自我的c＃-method的数据看起来像这样：

[{"id":"RavenUsers/One"},{"id":"RavenUsers/Two"},{"id":"RavenUsers/Three"}]

第二个名为GetFriendRequests的脚本函数不起作用，据我所知，传入此处的数据与传入myFunction的数据没有区别：

[{"userWhoWantsToAddYou":"RavenUsers/Ten"},{"userWhoWantsToAddYou":"RavenUsers/Eleven"}]

Answer 1

我建议您使用then代替success，因为$http会返回promise。

如果你的表没有“渲染”，那么在成功函数，console.log（）数据中放置一个断点，或者检查HTML模板中的friendRequests，例如：使用<div>{{ friendRequests | json }}</div>，确保您实际从响应中获取数据。

现在你根本不处理异常。

示例：

result.then(function(data) {
    console.log('got data')
  },function(error) {
    console.log('oh noes :( !');
});

此处相关的plunker http://plnkr.co/edit/KzY8A3

Answer 2

如果您（a）为您的代码提供了一个plunker或（b）提供了错误消息，将会很有帮助。

ng-repeat需要在重复中的每个项目上使用uniquificator，默认为item.id.如果您在该项目上没有id字段，则需要告知angular要使用的字段。

https://docs.angularjs.org/api/ng/directive/ngRepeat

所以我建议改变

<tr ng-repeat="friendRequest in friendRequests">

到

<tr ng-repeat="friendRequest in friendRequests track by userWhoWantsToAddYou">

看看是否有效。

AngularJs。 ng-repeat的问题

2 个答案: