Javascript 动态显示隐藏动态内容的代码_Javascript_Angularjs_Angularjs Ng Repeat_Ng Show

Javascript 动态显示隐藏动态内容的代码

javascript angularjs

Javascript 动态显示隐藏动态内容的代码,javascript,angularjs,angularjs-ng-repeat,ng-show,Javascript,Angularjs,Angularjs Ng Repeat,Ng Show,按原样运行代码，代码运行良好，但我希望在不污染angularjs代码的情况下实现相同的功能 <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http

按原样运行代码，代码运行良好，但我希望在不污染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>


{{x.firstname}}{x.lastname}



var app=angular.module（'newapp'，[]）；
app.controller（'newctrl'，函数（$scope）{
$scope.name=[
{“id”：“1”，“firstname”：“Akhilesh”，“lastname”：“Kumar”}，
{“id”：“2”，“firstname”：“Aman”，“lastname”：“Kumar”}，
{“id”：“3”，“firstname”：“Mithilesh”，“lastname”：“Kumar”}
];  
$scope.togglecompanyar=函数（val）{
$（“#”+val）.toggle（）；
};
});

您不需要使用jQuery来显示/隐藏div，只需在此处使用

ngshow

为了实现这一点，您需要在

names

集合的每个元素上添加

show

标志（您无需向集合中添加新的

show

属性，如果您没有在每个names元素中添加

show:false

prop，angular将处理此问题），并在单击元素时切换

show

标志。此后，在

ng show

指令中使用

x.show

标志来显示和隐藏div

基本上在初始加载时

x。显示未定义的或假值，因此无论如何，它将隐藏加载时的所有元素内容。当您单击元素ng时，单击指令将标记为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>


{{x.firstname}{{x.lastname}}

你好，Pankaj，谢谢你的快速回复，但我有一个问题。由于代码是动态的，所以数据如何单击=x.show=！x、 show wil bind with ng show=“x.show”？@AkhileshKumar yes.show
属性将添加到x
中，该属性是ng repeat
的每个元素，您可以查看更新后的答案其工作正常。。。。。谢谢，但我不知道这个概念。请参考一些链接，以便我了解其背后的概念，或者如果可能，请解释。您可以使用ngShow和ngHidex表示您当前的ng repeat元素