Question

我正在创建一个网络应用，我有一个页面是home.html和about.html。在home.html中，我有用户列表，当他们点击其中一个用户时，会转到about.html，但不会显示用户信息。任何人都可以检查我的代码，看看我做错了什么。提前致谢。

这是我的代码。（home.html）

    <form name="myForm">

<label>Search
<input type="text" size="35" ng-model="userSearch">
</label>

</form>

<br/>

<label>Filters</label>
<button type="button" class="btn btn-link">+ Add Filter</button>
<hr>
<legend>Users</legend>




<div class="people" ng-repeat="person in userInfo.lawyers | filter:userSearch" >



    <a href="#/lawyer/{{ person.id }}">
    <img ng-src="{{person.imgUrl}}"/>
    <span class="name">{{person.firstName}} </span>
    <span class="name">{{person.lastName}} </span>

   <p class="title">{{person.title}} </p>
  <span class="date">{{person.date}} </span>


</a>


</div>

About.html

<div class="people-view">
  <h2 class="name">{{person.first}}</h2>
    <h2 class="name">{{person.last}}</h2>

  <span class="title">{{person.title}}</span>

  <span class="date">{{person.date}} </span>



</div>




<div class="list-view">


  <form>
    <fieldset ng-disabled="inactive">

  <legend>Basic Info</legend>

  <b>First Name:</b>
  <input type="text" ng-model="person.first">
  <br>
  <b>Last Name:</b>
  <input type="text" ng-model="person.last">
  <br>
  <b>Email:</b>
  <input type="email" ng-model="person.email">
  <br>
  <b>Phone:</b>
  <input type="num"  ng-model="person.phone">
  <br>
  <b>Website:</b>
  <input type="text" ng-model="person.website">
  <br>
  <b>Education:</b>
  <input type="text" ng-model="person.education">
  <br>
  <b>Education Year:</b>
  <input type="text" ng-model="person.year">

  <br>




  </form>



</div>
</div>

App.js

var app = angular.module("Portal", ['ngRoute',  'ui.bootstrap' ]);



    app.controller('MyCtrl', function($scope) {

        //form setting to true
        $scope.inactive = true;

        $scope.confirmedAction = function() {

        isConfirmed.splice($scope.person.id, 1);

        location.href = '#/lawyer';


    }

});





app.config(function ($routeProvider) {
    $routeProvider
    .when("/lawyer", {
        controller: "HomeController",
        templateUrl: "partials/home.html"
    })
    .when("/lawyer/:id", {
        controller: "LawyerController",
        templateUrl: "partials/about.html"
    })
    .otherwise({
        redirectTo: '/lawyer'

    });

});

控制器

app.controller('LawyerController', ['$scope', 'people', '$routeParams',
    function ($scope, people, $routeParams) {

        people.getUserInfo().then(function (response) {

            $scope.person = people.getUserInfo();

            console.log($scope.person.lawyers);
        }, function (error) {
            console.log(error)
        });
    }]);

的HomeController

var isConfirmed = false;
app.controller('HomeController', function($scope, people, $http) {
    if (!isConfirmed) {
        people.getUserInfo().then(function (response) {
            $scope.userInfo = response.data;

            isConfirmed = $scope.userInfo;
            console.log($scope.userInfo.lawyers);
        }, function (error) {
            console.log(error)
        });
    }
});

服务

    app.factory('people', ['$http', function($http) {
    var userInfo = {  
        getUserInfo: function () {
            return $http.get('https://******************');

        }
    };
    return userInfo;
}]);

Answer 1

正如其他人提到的，你的整个代码都是错误的！但我会尽力帮助你。

你在LawyerController中没有任何方法来获取数据，所以让我们从那开始：

在这样的app.js中更改$ routeProvider以获得方法：

$routeProvider
   .when("/lawyer", {
       controller: "HomeController",
       templateUrl: "partials/home.html"
    })
    .when("/lawyer/:id", {
    controller: "LawyerController",
    templateUrl: "partials/about.html",
    method: 'lawyerInit'
   })
   .otherwise({
       redirectTo: '/lawyer'

   });

然后将LawyerController更改为以下内容：

app.controller('LawyerController', ['$scope', 'people', '$routeParams',
   function ($scope, people, $routeParams) {

     $scope.lawyerInit = function(){
          people.getUserInfo().then(function (response) {

        $scope.getAll= people.getUserInfo();
        for (var i=0; i<=$scope.getAll.length -1; i++){
              if($scope.getAll[i].lawyers.id==$routeParams.id){
                   $scope.person= $scope.getAll[i];
               }
           }
        console.log($scope.person.lawyers);
    }, function (error) {
        console.log(error)
    });
     }


}]);

希望这项工作，我不确定你的json响应是怎么回事，如果你在这一行中遇到错误if($scope.getAll[i].lawyers.id==$routeParams.id)，你需要确保{j}对象中的id确切位置。

页面未在AngularJS中更新

1 个答案: