0

すべて、私は誰かが私を解決するのを手伝ってくれることを望んでいる問題に直面しています。ユーザーのリストと対応するリンクを返すサービスがあります。クリックするとユーザーがログインする必要があり、ログインが成功すると、ユーザーにユーザー情報が表示されます。ユーザーがこのリンクをクリックし、テンプレートを使用して詳細を表示できるようにするにはどうすればよいですか。この部分的なテンプレートをすべてのユーザーに再利用したい

例: データ: {{user.url}} の結果: http://localhost:5555/user/randi333
データ: {{user.url}} の結果: http://localhost:5555/user/rkds333 

            <td>{{user.id}}</td>
            <td><a ng-href="{{user.url}}">User Details</a></td> 
            <td>{{user.firstName}}</td>
            <td>{{user.lastName}}</td>
            <td>{{user.gender | gender}}</td>
            <td>{{user.address}}</td>
            <td>{{user.city}}</td>
            <td>{{user.state}}</td>
            <td>{{user.ZipCode}}</td>
            <td>{{user.country}}</td>
            <td>{{user.enrollmentEntitysCount}}</td>
            <td>{{user.telephone}}</td>

        </tr>
    </tbody>
var consumewebservice = angular
                          .module("myconsumewebservice", ["ngRoute"])
                          .config(function ($routeProvider) {
                              $routeProvider
                                .when("/home", {

                                    templateUrl: "Templates/home.html",
                                    controller: "homeController"
                                })
                                .when("/user", {

                                    templateUrl: "Templates/user.html",
                                    controller: "webserviceController"
                                })
                              .when("/user/{{hash}}", {

                                  templateUrl: "Templates/userdetails.html",
                                  controller: "webserviceController"
                              })
                          })
                          .controller("webserviceController", function ($scope, $http,$log,$location,$anchorScroll) {

                              var successfulcallback = function (response) {
                                  $scope.users = response.data;
                                  $log.info(response);
                              };
                              var errorcallback = function (response) {
                                  $scope.error = response.data;
                                  $log.error(response);
                              };
                              $http.get('/api/users/')
                                  .then(successfulcallback, errorcallback);


                             $scope.scrollTo = function (firstname) {
                                  $location.hash(firstname);
                                  $anchorScroll();
                             }


                              //Scope to change view where we want the data to display
                              $scope.changeView = function (view) {
                                  $location.path(view); // path not hash
                              }
                                  $scope.search = function (item) {
                                      if ($scope.searchText == undefined) {
                                          return true;
                                      }
                                      else {
                                          if (item.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1 || item.city.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1) {
                                              return true;
                                          }
                                      }
                                      return false;

                                  }
                                  $scope.sortColumn = "firstname";
                                  $scope.reverseSort = false;
                                  $scope.sortData = function (column) {
                                      $scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
                                      $scope.sortColumn = column;
                                  }
                                  $scope.getSortClass = function (column) {
                                      if ($scope.sortColumn == column) {
                                          return $scope.reverseSort ? 'arrow-down' : 'arrow-up';
                                      }
                                      return '';
                                  }
                              }
                              );

リンクをクリックすると、/user/{{username}} に移動します。これらはユーザー名によって異なり、xml の結果が返されます。このテンプレートを使用する必要があります。ユーザーのリンクがクリックされたときに、それをテンプレートとして使用し、それらのデータを読み取ってフォーマットします....助けてください

4

2 に答える 2

0

ここで状態参照を使用します。ng-href を ui-sref と stateParams に置き換えます。

<td>{{user.id}}</td>
<td><a ui-sref="userDetail({userDetail: user})">User Details</a></td> 
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.gender | gender}}</td>
<td>{{user.address}}</td>
<td>{{user.city}}</td>
<td>{{user.state}}</td>
<td>{{user.ZipCode}}</td>
<td>{{user.country}}</td>
<td>{{user.enrollmentEntitysCount}}</td>
<td>{{user.telephone}}</td>

...そして、ユーザーのプロファイル ビューでユーザー オブジェクトを取得します。

于 2016-02-28T06:03:01.997 に答える