AngularJS“连接后端”应用程序未在编辑对话框中加载数据

Question

我遇到与此链接中列出的问题相同的问题：
AngularJS “Wire up a Backend” example not loading data on edit dialog
但是我添加了＆＃34; /＆＃34;到firbase网址（https://brilliant-fire-8211.firebaseio.com/）

但它仍无效。

这是我的代码：

app.js

'use strict';

var zenvaApp = angular.module('zenvaApp', [

  'ngRoute',
  'firebase',
  'zenvaControllers',
  'zenvaFilters',
  'zenvaServices'

]);
zenvaApp.value('fbURL', 'https://brilliant-fire-8211.firebaseio.com/');

zenvaApp.factory('users', function ($firebase, fbURL) {
    return $firebase(new Firebase(fbURL));
});

zenvaApp.config(['$routeProvider',
  function ($routeProvider) {
      $routeProvider.
          when('/users', {
              templateUrl: 'partials/user-list.html',
              controller: 'UserListCtrl'
          })
          .when('/newUser', {
              controller: 'CreateCtrl',
              templateUrl: 'partials/user-detail.html'
          })
          .when('/edit/:userId', {
              controller: 'EditCtrl',
              templateUrl: 'partials/user-detail.html'
          })
          .otherwise({
              redirectTo: '/users'
          });

  }]);

controllers.js

'use strict';

/* Controllers */
var zenvaControllers = angular.module('zenvaControllers', []);

zenvaControllers.filter('hobbyFilter', function () {
    return function (items, query) {
        var filtered = [];


        if (query.hobby === undefined || query.hobby === '') {
            return items;
        }

        angular.forEach(items, function (item) {
            console.log(item.gender, query.gender);
            if (
              query.hobby !== undefined &&
              query.hobby !== '' &&
              item.hobby.indexOf(query.hobby) >= 0) {
                filtered.push(item);
            }
        });

        return filtered;
    };
});


zenvaControllers.filter('genderFilter', function () {
    return function (items, query) {

        var filtered = [];


        if (query.gender === undefined || query.gender === '') {
            return items;
        }

        angular.forEach(items, function (item) {

            if (item.gender === query.gender) {
                filtered.push(item);
            }
        });

        return filtered;
    };
});


zenvaControllers.controller('UserListCtrl', ['$scope', 'User','users', function ($scope, User, users) {
    $scope.users = users;
    //$scope.users = User.query();
    $scope.genders = ["Male", "Female"];

    $scope.alerts = [];
    $scope.FriendsNoty = function () {
        var newLength = $scope.alerts.push({ msg: "You are now Friends with " });
        setTimeout(function () { $("#noty").fadeOut(1500); $scope.alerts.splice((newLength - 1), 1); }, 3000);
    };

    $scope.detail = function (user) {
        $scope.user = user;
    };


    //$scope.addUser = function () {
    //    $scope.users.push({ name: $scope.userName });
    //    $scope.userName = '';
    //};

}]);

zenvaControllers.controller('CreateCtrl', function ($scope, $location, $timeout, users) {
    $scope.save = function() {
        users.$add($scope.user, function () {
            $timeout(function () { $location.path('/users'); });
        });
    };
});


zenvaControllers.controller('EditCtrl',
  function($scope, $location, $routeParams, $firebase, fbURL) {
      var userUrl = fbURL + $routeParams.userId;
      $scope.user = $firebase(new Firebase(userUrl));

      $scope.destroy = function () {
          debugger;
          $scope.user.$remove();
          $location.path('/users');
      };

      $scope.save = function() {
          $scope.user.$save();
          $location.path('/users');
      };
  });

用户-list.html

<div id="header" class="navbar navbar-fixed-top">
    <h1>Friends</h1>
</div>

<div class="container" style="margin-top: 50px">
    <div class="row" style="margin-top: 15px;">
        <div class="col-md-4 divPad">
            <b>Sort by gender:&nbsp; </b>
            <select ng-model="query.gender" class="btn btn-default">
                <option value="">All users</option>
                <option ng-repeat="gender in genders" value="{{gender}}">{{gender}}</option>
            </select>
            <!--       <input type="checkbox" class="check-box" data-ng-model='genders.Male' /> <b>Male</b> &nbsp;&nbsp;&nbsp;
              <input type="checkbox" class="check-box" data-ng-model='genders.Female'/> <b>Female</b>-->
        </div>
        <div class="col-md-4">
            <alerts id="noty" class="noty" ng-repeat="alert in alerts">{{alert.msg}}{{user.name}}</alerts>
        </div>
        <div class="col-md-offset-4 divPad">
            <!-- <form ng-submit="addUser()">
                     <input  class="inputMy" type="text" ng-model="userName" size="30"
                             placeholder=" add new user here">
                     <input class="btn-primary btn" type="submit" style="float:right" value="Add">
                 </form>-->
            <a href="#/newUser" class="btn-primary btn" type="submit" style="float:right;margin-right: 14px;">Add New User</a>
        </div>
    </div>
    <div class="row" style="margin-top: 15px;">
        <div class="col-lg-2 divPad">
            <b>Sort by Hobbies:</b>
            <input class="form-control" ng-model="query.hobby">
        </div>
    </div>

    <div class="divPad">
        <hr />
    </div>

    <div class="row" style="margin-top: 15px;">
        <div class="col-lg-12">
            <ul class="phones">
                <li ng-repeat="user in users |  genderFilter:query |  hobbyFilter:query" ng-click="detail(user)" class="thumbnail phone-listing">
                    <a href="#/users/{{user.name}}" class="avatar">
                        <img style="margin-top: 3px; margin-right: 7px;" ng-src="{{user.imageUrl}}"></a>
                    <a href="#/users/{{user.name}}">{{user.name}}</a>
                    <p><b>Hobby:</b>&nbsp;{{user.hobby}}</p>
                    <p>
                        <b>Gender:</b>&nbsp;{{user.gender}}
                        <span>
                            <button id="btnclick" ng-click="FriendsNoty()" class="btn btn-primary" style="float: right; margin-right: 10px;">
                                <span class="glyphicon glyphicon-plus-sign">&nbsp;</span>Add As Friend
                            </button>
                            <a class="btn btn-success" href="#/edit/{{user.$id}}" style="float: right; margin-right: 10px;">Edit</a>
                        </span>
                    </p>
                    <p><b>Member from:</b>&nbsp;{{user.member}}</p>
                </li>
            </ul>
        </div>
    </div>
</div>

用户-details.html

<div id="header" class="navbar navbar-fixed-top">
    <h1>Friends</h1>
</div>
<div class="container" style="margin-top: 50px">
    <form name="myForm">
        <div class="row" style="margin-top: 15px;">
            <div class="col-md-4 divPad">
                <div class="control-group" ng-class="{error: myForm.name.$invalid && !myForm.name.$pristine}">
                    <label>Name:&nbsp;</label>
                    <input class="inputMy" type="text" name="name" ng-model="user.name" required>
                    <span ng-show="myForm.name.$error.required && !myForm.name.$pristine" class="help-inline">Required {{myForm.name.$pristine}}</span>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 15px;">
            <div class="col-md-4 divPad">
                <div class="control-group" ng-class="{error: myForm.hobby.$invalid && !myForm.hobby.$pristine}">
                    <label>Hobby:&nbsp;</label>
                    <input class="inputMy" type="text" name="hobby" ng-model="user.hobby" required>
                    <span ng-show="myForm.hobby.$error.required && !myForm.hobby.$pristine" class="help-inline">Required {{myForm.name.$pristine}}</span>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 15px;">
            <div class="col-md-4 divPad">
                <div class="control-group" ng-class="{error: myForm.gender.$invalid && !myForm.gender.$pristine}">
                    <b>Gender:&nbsp;</b>
            <select  class="btn btn-default" name="gender" ng-model="user.gender" required>
                <option value="">Selected your gender</option>
                <option value="Male">Male </option>
                <option value="Female">Female </option>
            </select>
                    <span ng-show="myForm.gender.$error.required && !myForm.gender.$pristine" class="help-inline">Required {{myForm.name.$pristine}}</span>
                </div>

            </div>
        </div>
        <div class="row" style="margin-top: 15px;">
            <div class="col-md-4 divPad">
                <div class="control-group" ng-class="{error: myForm.member.$invalid && !myForm.member.$pristine}">
                    <label>Member from:&nbsp;</label>
                    <input class="inputMy" type="text" name="member" ng-model="user.member" required>
                    <span ng-show="myForm.member.$error.required && !myForm.member.$pristine" class="help-inline">Required {{myForm.name.$pristine}}</span>
                </div>
            </div>
        </div>

         <div class="divPad">
        <hr />
    </div>
        <div class="row">
            <div class="col-md-4 divPad">
                <a href="#/users" class="btn" style="color: red">Cancel</a>
                <button ng-click="save()" ng-disabled="myForm.$invalid"
                    class="btn btn-primary">
                    Save</button>
                <button ng-click="destroy()"
                    ng-show="user" class="btn btn-danger">
                    Delete</button>
            </div>
        </div>
    </form>
</div>

ZenvaAngular.html

<!doctype html>
<html lang="en" ng-app="zenvaApp">
<head>
    <meta charset="utf-8">
    <title>Friends</title>
    <link href="http://angular.github.io/angular-phonecat/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="css/animations.css" rel="stylesheet" />
    <script src="http://angular.github.io/angular-phonecat/bower_components/jquery/jquery.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="http://angular.github.io/angular-phonecat/bower_components/angular-route/angular-route.js"></script>
    <script src="http://angular.github.io/angular-phonecat/bower_components/angular-resource/angular-resource.js"></script>
    <script src="https://cdn.firebase.com/v0/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/services.js"></script>
</head>
<body>
    <div ng-view class="view-frame"></div>
</body>
</html>

如果有人可以帮我解决这个问题，我将不胜感激 非常感谢

Answer 1

大家好，
我终于在这个问题上找到了我的错误;）
我想的更简单 我只需要添加＆＃34; orderByPriority＆＃34;我的ng-repeat和它。

<li ng-repeat="user in users |  genderFilter:query | orderByPriority  | filter:search" ng-click="detail(user)" class="thumbnail phone-listing">
<a href="#/users/{{user.name}}" class="avatar">