Angularjs ng-hide 不适用于 ng-include 模板
Angularjs ng-hide not working with ng-include template
谁能帮帮我。
在index.html中,我运行ng-view,其中代码对应Routing.js文件。菜单调用两个页面 main.html 和 product.htm。
main.htm,包含另一个名为 filterApp.html 的页面。
我需要隐藏嵌入 main.html filterApp.html 的页面元素。我没有成功。
如果我采用包含并将代码直接放入 main.html 作品。我读到 ng-ng-hide 和 include 不能正常工作。有什么我可以做的。我需要将它放在单独的文件中。
这是页面的代码。
非常感谢
Index.html
<html ng-app="appDataBoard">
<body ng-controller="mainController" >
<ul >
<li class="nav-item start open">
<a href="#/main" class="nav-link nav-toggle"></a>
</li>
<li class="nav-item ">
<a href="#/product" class="nav-link nav-toggle"> </a>
</li>
</ul>
<div class="col-md-12 column sortable">
<div ng-view></div>
</div>
</body>
</html>
Main.html
<div class="jumbotron text-center">
<h1>main Page</h1>
<p>{{ message }}</p>
</div>
<!-- INCLUDE FILTER APPS-->
<div ng-include="'./template/filterApp.html'" ></div>
Product.html
<div class="jumbotron text-center">
<h1>Product Page</h1>
<p>{{ message }}</p>
p ng-hide="hide1">este parrafo se debe borrar</p>
</div>
filterApp.html
<div ng-hide="hselect1" >
<select id="select-1" multiple="multiple" onchange="RecargaSelectBU()" >
</select>
</div>
Routing.js
// create the module and name it dbApp
var dbApp = angular.module('appDataBoard', ['ngRoute']);
// configure our routes
dbApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/main', {
templateUrl : 'template/main.html',
controller : 'mainController'
})
// route for the about page
.when('/product', {
templateUrl : 'template/product.html',
controller : 'productController'
})
});
// create the controller and inject Angular's $scope
dbApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Pagina principal';
$scope.hselect1 = true;
});
dbApp.controller('productController', function($scope) {
$scope.message = 'Pagina de producto.';
$scope.hide1 = true;
});
检查这个 plunker link。它对我来说很好用。
https://embed.plnkr.co/RZDGdnFEq1SmT7F3ncZa/
谁能帮帮我。 在index.html中,我运行ng-view,其中代码对应Routing.js文件。菜单调用两个页面 main.html 和 product.htm。 main.htm,包含另一个名为 filterApp.html 的页面。 我需要隐藏嵌入 main.html filterApp.html 的页面元素。我没有成功。 如果我采用包含并将代码直接放入 main.html 作品。我读到 ng-ng-hide 和 include 不能正常工作。有什么我可以做的。我需要将它放在单独的文件中。 这是页面的代码。 非常感谢
Index.html
<html ng-app="appDataBoard">
<body ng-controller="mainController" >
<ul >
<li class="nav-item start open">
<a href="#/main" class="nav-link nav-toggle"></a>
</li>
<li class="nav-item ">
<a href="#/product" class="nav-link nav-toggle"> </a>
</li>
</ul>
<div class="col-md-12 column sortable">
<div ng-view></div>
</div>
</body>
</html>
Main.html
<div class="jumbotron text-center">
<h1>main Page</h1>
<p>{{ message }}</p>
</div>
<!-- INCLUDE FILTER APPS-->
<div ng-include="'./template/filterApp.html'" ></div>
Product.html
<div class="jumbotron text-center">
<h1>Product Page</h1>
<p>{{ message }}</p>
p ng-hide="hide1">este parrafo se debe borrar</p>
</div>
filterApp.html
<div ng-hide="hselect1" >
<select id="select-1" multiple="multiple" onchange="RecargaSelectBU()" >
</select>
</div>
Routing.js
// create the module and name it dbApp
var dbApp = angular.module('appDataBoard', ['ngRoute']);
// configure our routes
dbApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/main', {
templateUrl : 'template/main.html',
controller : 'mainController'
})
// route for the about page
.when('/product', {
templateUrl : 'template/product.html',
controller : 'productController'
})
});
// create the controller and inject Angular's $scope
dbApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Pagina principal';
$scope.hselect1 = true;
});
dbApp.controller('productController', function($scope) {
$scope.message = 'Pagina de producto.';
$scope.hide1 = true;
});
检查这个 plunker link。它对我来说很好用。 https://embed.plnkr.co/RZDGdnFEq1SmT7F3ncZa/