Question

下面的代码没有隐藏span，我怎么能隐藏span.i我问这个问题，因为我是angularjs的新手。

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
$scope.myVar=true;
</script>


<body ng-app="" >

<span ng-hide="myVar">
<a href="adminPage">Click here for admin role</a>
</span>

</body>

</html>

Answer 1

首先需要一个模块，然后是控制器或指令。

<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module("myApp")
.controller("myController", function ($scope) {
$scope.myVar = true;
});
</script>


<body ng-controller="myController">

<span ng-hide="myVar">
<a href="adminPage" ng-click"myVar = !myVar">Click here for admin role</a>
</span>

</body>

</html>

Answer 2

您尚未正确引导应用程序以使其成为Angular应用程序。

您需要创建一个主模块
您需要将主模块附加到shell / index.html
您需要一个Controller来执行数据绑定，用户交互等

你需要写下你的第一个“Hello，World！”使用AngularJS的应用程序，因为它常常写一个“Hello，World！”当你开始使用任何技术时应用程序。

ng-app指令用于定义将成为Angular应用程序的HTML部分，它的值是要加载的可选应用程序模块名称。请参阅有关using-ng-app-without-a-value

使用Angular 1.0.1显示或隐藏内容，而不指定ng-app指令中的主模块

//angular
  //.module('demo', [])
  //.controller('DefaultController', DefaultController);

//DefaultController.$inject = ['$scope'];

function DefaultController($scope) {
  $scope.isAdmin = true;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="">
  <div ng-controller="DefaultController">
    <span ng-show="isAdmin">
      <a href="#">Click here for admin role</a>
    </span>
    <span ng-hide="isAdmin">
      <a href="#">Click here for user role</a>
    </span>
  </div>
</div>

请通过指定主模块检查以下示例使用$ scope object 来显示或隐藏内容。

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);

DefaultController.$inject = ['$scope'];

function DefaultController($scope) {
  $scope.isAdmin = true;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController">
    <span ng-show="isAdmin">
      <a href="#">Click here for admin role</a>
    </span>
    <span ng-hide="isAdmin">
      <a href="#">Click here for user role</a>
    </span>
  </div>
</div>

请使用控制器别名语法检查以下示例，以通过指定主模块来显示或隐藏内容。

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);

function DefaultController() {
  var vm = this;
  vm.isAdmin = false;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <span ng-show="ctrl.isAdmin">
      <a href="#">Click here for admin role</a>
    </span>
    <span ng-hide="ctrl.isAdmin">
      <a href="#">Click here for user role</a>
    </span>
  </div>
</div>

如何使用angularjs中的ng-hide隐藏div

2 个答案: