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

我不知道您想要显示数据的确切程度，但是当我想做类似的事情时，我会这样做：

<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>

在Angular中

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.";
    });
}]);

Angular ng-repeat-start和ng-repeat-end允许您使用相同的数据重复不同的标记，这些标记可能非常有用。 ng-show如果他的参数为真，则显示标记。希望它有所帮助。

ngRepeat Docs

ngShow Docs

Answer 2

以下是点击用户名时显示隐藏其他信息的切换功能的工作示例。 http://jsfiddle.net/Adalsingh/5n1ggovh/

＆＃13;

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;
    }
}]);

＆＃13;

<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>

＆＃13;

单击以显示用户信息

2 个答案: