클릭하면 사용자 정보가 표시됩니다.

Question

저는 javascript와 angularjs에 매우 익숙하며, 매우 기본적인 것을하려고합니다. 클릭하는 특정 사용자에 대한 정보를 표시하고 싶습니다. 다만 경보가, 지금 클릭 이벤트에

<tr ng-repeat="user in users" ng-click="selectUser()"> 
       <td>{{user.FirstName}} {{user.LastName}}</td> 
       <td>{{user.Email}}</td> 
       <td>{{user.RegistrationDate | date : 'yyyy/MM/dd'}}</td> 
      </tr> 

:

나는 내가 다음과 같이 표시 사용자의 목록을 가지고있다. 내 webapi에서 메서드 GetUser (int id)처럼 보이고 데이터를 가져 오는 데 아무 문제가 없습니다.

이처럼 내 JS 컨트롤러 모습입니다 : 나는 당신이 당신의 데이터를 표시하는 방법을 정확하게하지 않는

angular.module('myApp') 
.controller('userCtrl', ['$scope', '$http', function ($scope, $http) { 

    $http.get('/api/controllerName') 
     .success(function (data) { 
      $scope.users = data; 
     }) 
     .error(function() { 
      $scope.error = "Couldnt load data or there was none."; 
     } 
        ) 
    //$scope.selectedUser = function() { 
    // $http.get() 
    //} 

    $scope.selectUser = function() { 
     alert("Some text"); 
    } 
}]); 

Answer 1

,하지만 난 그런 식으로 뭔가를 할 때 나는이 수행

을

그리고

angular.module('myApp') 
.controller('userCtrl', ['$scope', '$http', function ($scope, $http) { 

    $http.get('/api/controllerName').then(function(data){ 
     var users = data; 
     for(i in users){ 
      users[i].display = false; 
     } 
     $scope.users = users; 
    }, function(){ 
     $scope.error = "Couldnt load data or there was none."; 
    }); 
}]); 

각도 ng-repeat-start 및 ng-repeat-end 허용 각도에서

<tr ng-repeat-start="user in users" ng-click="user.display = !user.display"> 
    <td>{{user.FirstName}} {{user.LastName}}</td> 
</tr> 
<tr ng-repeat-end ng-show='user.display'> 
    <td> 
     <div> 
      <p>{{user.Email}}</p> 
      <p>{{user.RegistrationDate | date : 'yyyy/MM/dd'}}</p> 
     </div> 
    </td> 
</tr> 

동일한 데이터를 사용하여 다른 태그를 반복하면 원하는 정보를 매우 유용하게 사용할 수 있습니다. ng-show 그의 param이 true이면 태그를 표시하십시오. 도움이 되길 바랍니다. 사용자 이름 쇼에 클릭이 다른 정보를 숨길 때 여기

ngShow Docs

Answer 2

ngRepeat Docs

은 토글 기능을 예를 노력하고 있습니다. http://jsfiddle.net/Adalsingh/5n1ggovh/

var data = [{FirstName:'f1',LastName:'l1',Email:'e1',RegistrationDate:'2015-01-20',showData:false},{FirstName:'f2',LastName:'l2',Email:'E2',RegistrationDate:'2015-01-21',showData:false},{FirstName:'f3',LastName:'l3',Email:'e3',RegistrationDate:'2015-01-22',showData:false}]; 
 

 
angular.module('myApp',[]) 
 
.controller('userCtrl', ['$scope', '$http', function ($scope, $http) { 
 
    $scope.users = data; 
 
    /* 
 
    $http.get('/api/controllerName') 
 
     .success(function (data) { 
 
      $scope.users = data; 
 
     }) 
 
     .error(function() { 
 
      $scope.error = "Couldnt load data or there was none."; 
 
     }); 
 
    */ 
 
    
 
    $scope.selectUser = function (obj) { 
 
     if(obj.showData) 
 
      obj.showData = false; 
 
     else 
 
      obj.showData = true; 
 
    } 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="userCtrl"> 
 
     <table> 
 
      <tr ng-repeat="user in users" ng-click="selectUser(user)"> 
 
       <td style="cursor:pointer">{{user.FirstName}} {{user.LastName}}</td> 
 
       <td ng-show="user.showData">{{user.Email}}</td> 
 
       <td ng-show="user.showData">{{user.RegistrationDate | date : 'yyyy/MM/dd'}}</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div>