i have tow div's. one is add and another one is view . any one div shows at a time. my add button is placed out of the controller.
<input id="Button1" type="button" value="Add" onclick="AddClick()" />
<div ng-app="myApp" ng-controller="csrControl" ng-init="viewdiv=true">
<div id="view" ng-show="viewdiv">
view
</div>
<div id="add" ng-hide="viewdiv">
Add
</div>
</div>
Here i have externally called the controller and assign scope variable to false. the variable set as false, but the div cannot hide and show . ng-show and ng-hide not working
function AddClick() {
var $scope = 'div[ng-controller="csrControl"]';
$scope.viewdiv = 'false';
$scope.$apply();
}
Here are the things I changed to get it working:
ng-app="myApp" ng-controller="csrControl"
into the body. ng-init="viewdiv=true"
to $scope.viewdiv = true;
. and many little things. Check it out.
angular.module('myApp', ['myApp.controllers']); angular.module('myApp.controllers', []).controller('csrControl', [ '$scope', function($scope){ $scope.viewdiv = true; $scope.addClick = function() { $scope.viewdiv = false; } } ]);
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> </head> <body ng-app="myApp" ng-controller="csrControl"> <input id="Button1" type="button" value="Add" ng-click="addClick()" /> <div> <div id="view" ng-show="viewdiv"> view </div> <div id="add" ng-hide="viewdiv"> Add </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.