动态内容的动态显示隐藏代码angular js

Question

运行下面的代码，代码工作正常，但我想要相同的功能而不污染 angularjs 代码。

<html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="newapp" ng-controller="newctrl">
        <div ng-repeat="x in names">
            <div  data-ng-click="toggleCompanyArr(['nav_' + x.id])"><a href="">This is id : {{x.id}}</a></div>
            <div id="nav_{{x.id}}" style="display:none">{{x.firstname}} {{x.lastname}}</div><br><Br><Br>
        </div>
    </body>

<script>
var app = angular.module('newapp',[]);
app.controller('newctrl', function($scope){
    $scope.names=[
        {"id":"1","firstname":"Akhilesh","lastname":"Kumar"},
        {"id":"2","firstname":"Aman","lastname":"Kumar"},
        {"id":"3","firstname":"Mithilesh","lastname":"Kumar"}
    ];  
    $scope.toggleCompanyArr = function(val){
        $("#"+val).toggle();    
    };
});
</script>
</html>

Answer 1

不需要用jQuery到show/hidediv，这里用ng-show即可。

为实现这一点，您需要在 names 集合的每个元素上添加 show 标志（您不必向您的 show 属性添加新的 show 属性集合，如果您不在每个名称元素中添加 show: false 属性，angular 将处理此问题），并在单击该元素时切换 show 标志。此后在 ng-show 指令中使用 x.show 标志来显示和隐藏 div.

基本上在初始加载时 x.show 值是 undefined 或 false 所以无论如何它将在加载时隐藏所有元素内容。当您单击元素时，ng-click 指令将标记为 x.show = true 并且该元素将被显示。

这种方法背后的另一个优点是，您可以在其对象中拥有每个元素的状态。

假设您选择了 akhilesh 选项，那么它会显示 {"id":"1","firstname":"Akhilesh","lastname":"Kumar", show: true},，如果未单击这些元素，其他选项将显示 show: false。

标记

<div  data-ng-click="x.show = !x.show">
    <a href="">This is id : {{x.id}}</a>
</div>
<div ng-show="x.show">
    {{x.firstname}} {{x.lastname}}
</div>

Reference link

动态内容的动态显示隐藏代码angular js

Dynamic show hide code for dynamic content angular js

javascript

angularjs

angularjs-ng-repeat

ng-show