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。

要实现这一目标，您需要在show集合的每个元素上添加names标记（如果您不这样做，则无需向您的集合中添加新的show属性在你的每个名字元素中添加show: false prop，angular将处理这个问题），并在点击元素时切换show标志。然后在x.show指令中使用ng-show标志来显示＆amp;隐藏div。

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

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

假设您选择了akhilesh选项，那么它将{"id":"1","firstname":"Akhilesh","lastname":"Kumar", show: true},＆amp;如果未点击这些元素，则其他人将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

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

1 个答案: