动态内容角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来显示/隐藏div，你可以在这里简单地使用ng-show。

为了实现这一点，您需要在 names 集合的每个元素上添加 show 标志（如果您不添加 show: false 属性，则无需将新的 show 属性添加到您的集合中在您的每个名称元素中，角度会处理此问题），并在单击元素时切换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