Question

隐藏所有默认元素。

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

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

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

带有＆＃39; section1＆＃39;的元素必须显示id。在那之后，我不知道为什么找不到该元素。

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

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

http://jsfiddle.net/8jmnpn2u/

非常感谢。

Answer 1

这是您的解决方案

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

只需通过$ scope variable

即可

定义$scope.currentDiv = "";

并在show function上更新$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;
  }
});

Answer 2

试试这个：如果你创建一个数组来保持yor部分的'hide'值，你可以独立控制它们

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

主（app）模块

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/

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

2 个答案: