使用ng-if未定义时获取元素。 Angular.js

所有的默认元素都是隐藏的。使用ng-if未定义时获取元素。 Angular.js

$scope.hide=false; 
ng-if="hide"

我想要它，当我点击一个链接，它会显示相应的元素。但我不知道如何只显示相应的元素。例如，如果我点击

<li> <a href=''ng-click="show('section1')"> section1 </a> </ li>

必须显示具有'section1'ID的元素。之后，我不知道为什么没有找到元素。

Var myEl = angular.element (document.querySelector ('#' + id));

使用ng-if语句来执行此操作。

http://jsfiddle.net/8jmnpn2u/

非常感谢你。

来源

2017-04-26 yavg

这里是您的解决方案

http://jsfiddle.net/8jmnpn2u/2/

简单的，你可以通过$范围变量做

定义$scope.currentDiv = "";

和显示功能只需更新$scope.currentDiv

你的HTML代码

<body ng-app="myApp" ng-controller="myCtrl"> 
<nav> 
    <ul> 
    <li><a href='' ng-click="show('section1')">section1</a></li> 
    <li><a href='' ng-click="show('section2')">section2</a></li> 
    <li><a href='' ng-click="show('section3')">section3</a></li> 

    </ul> 
</nav> 
    <section id='section1' ng-if="currentDiv == 'section1'"> 
    1 
    </section> 
    <section id='section2' ng-if="currentDiv == 'section2'"> 
    2 
    </section> 
    <section id='section3' ng-if="currentDiv == 'section3'"> 
    3 
    </section> 
</body>

角控制器

// the main (app) module 
var myApp = angular.module("myApp", ['ui.swiper']); 

// add a controller 
myApp.controller("myCtrl", function($scope) { 
    $scope.msg = "hello world"; 
    $scope.currentDiv = ""; 
    $scope.show= function(id){ 
    $scope.currentDiv = id; 
    } 
});

来源

2017-04-26 18:38:59

看起来不错，但我需要得到的元素。 angular.element（document.querySelector（'＃'+ id））; – yavg

@yavg请详细解释。如果你将更新hide = true/false，它会影响所有的div。您需要与（==）比较或定义不同的变量。总是尝试更喜欢本地方法。 –

我需要获取html元素。我这样做（document.querySelector（'＃'+ id））;但我什么也没得到。我需要计算这个ID到我得到。你明白我说的吗？ – yavg

试试这个：如果您创建一个数组，以保持侑部分的“隐藏”的值，可以控制它们独立

<body ng-app="myApp" ng-controller="myCtrl"> 
<nav> 
    <ul> 
    <li><a href='' ng-click="show('section1')">section1</a></li> 
    <li><a href='' ng-click="show('section2')">section2</a></li> 
    <li><a href='' ng-click="show('section3')">section3</a></li> 

    </ul> 
</nav> 
    <section id='section1' ng-if="hide['section1']"> 
    1 
    </section> 
    <section id='section2' ng-if="hide['section2']"> 
    2 
    </section> 
    <section id='section3' ng-if="hide['section3']"> 
    3 
    </section> 
</body>

主（应用程序）模块

var myApp = angular.module("myApp", ['ui.swiper']); 

myApp.controller("myCtrl", function($scope) { 
    $scope.hide = []; 

    $scope.show= function(id){ 
    $scope.hide[id] = true; 
    var myEl = angular.element(document.querySelector('#'+id)); 
    } 
});

这里是jsfiddle http://jsfiddle.net/2c71bjuu/

来源

2017-04-27 01:40:16

使用ng-if未定义时获取元素。 Angular.js

回答

相关问题