Dom 使用AngularJS展开/收缩表节_Dom_Angularjs

Dom 使用AngularJS展开/收缩表节

dom angularjs

Dom 使用AngularJS展开/收缩表节,dom,angularjs,Dom,Angularjs,我有一个通过AngularJS绑定到数据的HTML表。为了简单起见，假设它有两列，CustomerId和CustomerName 当用户单击该行（或加号、按钮、链接，都无所谓）时，我希望展开该行下方的一个部分，进行ajax调用，并显示结果数据。我还想折叠先前扩展的行（如果有的话）这看起来像是一个DOM操作任务，我知道如何在JQuery中完成它（或者至少可以解决它），但我希望正确地完成它（即“角度方式”）。这可以通过指令完成。DOM操作通常通过指令完成。 var-app=angular.mod

我有一个通过AngularJS绑定到数据的HTML表。为了简单起见，假设它有两列，CustomerId和CustomerName

当用户单击该行（或加号、按钮、链接，都无所谓）时，我希望展开该行下方的一个部分，进行ajax调用，并显示结果数据。我还想折叠先前扩展的行（如果有的话）

这看起来像是一个DOM操作任务，我知道如何在JQuery中完成它（或者至少可以解决它），但我希望正确地完成它（即“角度方式”）。

这可以通过指令完成。DOM操作通常通过指令完成。

var-app=angular.module（'app'，[]）；
angular.module（'App'）。指令(
“制表符”[“$http”，
函数（$http）{
返回{
模板：“”+
“ID”+“客户”+
' ' +
“{{data[0]}”+
“{{data[1]}”+
“
”，
限制：“A”，
链接：函数postLink（范围、元素）{
scope.show=false；
scope.click=函数（）{
//console.log（scope.data）；
if（scope.datas==null）{
$http.get（'/data'）.success（函数（数据）{
scope.datas=数据；
}).错误（函数（）{
scope.data=[[1，“我是客户1”]，[3，“我是客户2”]；
})
}
}
}
};
}
]);

HTML:

这在今天的Angular上确实有点困难，但您有两个选择

首先，我认为最具说明性的解决方案是使用

和

的正常状态，以及使用编辑状态：

太棒了！我选择了ng开关选项。
var app = angular.module('App', []);
        angular.module('App').directive(
                'tab', ['$http',
                    function ($http) {
                        return {
                            template: '<table border="1" ng-click="click();show=!show" ><tr >' +
                                    '<th >ID</th>' + '<th>customer</th>' +
                                    ' </tr>' +
                                    '<tr ng-show="show" ng-repeat="data in datas"><td>{{data[0]}}</td><td>'+
                                    '{{data[1]}}</td></tr>' +
                                    '</table><br/>',
                            restrict: 'A',
                            link: function postLink(scope,element) {
                                scope.show =false;
                                scope.click = function () {
                                    //console.log(scope.datas);
                                    if (scope.datas ==null) {
                                        $http.get('/data').success(function (data) {
                                            scope.datas =data;
                                        }).error(function () {
                                          scope.datas = [[1,"i am customer 1"],[3,"i am customer 2"]];
                                        })
                                    }
                                }
                            }
                        };
                    }
                ]);

<body ng-app="App">
<div tab></div>
</body>