2

登録ユーザーのテーブルがあり、ユーザーの をクリックしてトリガーされるモーダルにプロファイル情報を表示したいと考えています<a href="#">name<a>。

以下は、私のプランカーを介した作業コードの一部です

上記のコードのように、現在 Bootstrap を使用してモーダルを実行していますが、多くのプロジェクトを Angular JS に変換しています。これを行う方法に精通しているJSコーダーはいますか?

よろしくお願いします

4

2 に答える 2

0

これであなたの質問に答えられるかどうかはわかりませんが、AngularJSを使用してプランカーのデモを作成しました

http://plnkr.co/edit/bNzolsIIm5geRd05Jaq6

HTMLファイルコード

<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
    <meta charset="utf-8">
    <title>Dynamic User Profile Loading</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <table >
      <tr ng-repeat="user in users">
        <td><a ng-click="getUserProfile(user)">{{user.username}}</a></td>
        <td>{{user.profile.fullName}}</td>
        <td>{{user.profile.email}}</td>
        <td>{{user.profile.phone}}</td>
      </tr>
    </table>
  </body>

</html>

Javascriptコード 

var app = angular.module('angularjs-starter', []);

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

    $scope.users =[{username: 'first'},{username: 'second'}, {username: 'third'},{username: 'fourth'}];  

  $scope.getUserProfile = function(user){
    //Here we have received the user object so search for the object int he array  
    var inx = $scope.users.indexOf(user);
    if(inx >= 0)
    {
      //retrieve user profile from server. 
      //Here we are going to set some values for the demo purpose
      $scope.users[inx].profile = {}; //Initialize profile as an object
      $scope.users[inx].profile.fullName = user.username + ' user';
      $scope.users[inx].profile.email = user.username + '@example.com';
      $scope.users[inx].profile.phone = user.username + ' phone';

    }
  };

});
于 2013-01-25T22:26:13.403 に答える
0

数週間前にこれについてブログを書きました。私のブログ投稿には、Twitter のブートストラップ モーダルを使用してほぼ正確にこれを行う plunkr の例が含まれています (追加の UI ディレクティブはありません)。

http://willvincent.com/blog/angularjs-and-twitter-bootstrap-playing-nicely

于 2013-02-03T18:35:31.210 に答える