使用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

回答

相關問題