I'd like to edit my checkbox so I get a or an input with type=button instead.
I have for now, properly working :
<label>Afficher</label>
<input type="checkbox" ng-model="isElementVisible">
Simply, with my script-angular.js :
$scope.isElementVisible = false ; //it's working, true when I click on my checkbox.
I haven't been using AngularJS for a looong time cause that's an old project and I don't know how to say to the button that my ng-model needs to change, should I do a function or is there an easier way ?
Thanks in advance to you all :3
You can simply handle it in the html using
ng-click="isElementVisible = !isElementVisible"
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.isElementVisible = false;
}]);
.hlight {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="isElementVisible = !isElementVisible">Click to toggle isElementVisible</button>
<div ng-class="{'hlight':isElementVisible}">isElementVisible is {{isElementVisible}}</div>
</div>
I want to use several functions in one controller. First family makes a request, the second part of the page should display by pressing the button (as here http://www.w3schools.com/angular/tryit.asp?filename=try_ng_events_toggle).
The first function is working fine, but the second is not.
app.controller('DemoCtrl', function($http) {},function($scope){})
This is the second function of the controller:
function($scope){
$scope.showMe=false;
$scope.myFunc=function() {
$scope.showMe=!$scope.showMe;
}
As planned at the touch of a button should show the page:
``
<body ng-app="jsbin">
<div ng-controller="DemoCtrl as vm">
<button ng-click="myFunc()">Click Me!</button>
<div ng-show=vm.showMe>
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
`
Sourse:http://zalil.su/3296697
angular controller takes one function with all dependencies.
app.controller('DemoCtrl', function($http,$scope) {
$scope.showMe=false;
$scope.myFunc=function() {
$scope.showMe=!$scope.showMe;
}
$scope.makeAjax= function(){
$http.something()...
}
})
got through this link https://docs.angularjs.org/guide/controller
Here when i click on cartDetails the dynamic scope variable x.SmId value need to be passed to the bellow function and in alert box need to display the parameter .How can we do this one in angular js?
<div ng-app="" ng-controller="MyCtrl">
<div ng-repeat="x in names">
<div ng-click="cartDetails('{{x.SmId}}')">
<div>{{x.name}}</div>
</div>
</div>
</div>
<script>
angular.module('MyApp', [])
.controller('MyCtrl', ['$scope', '$http', function($scope, $http) {
$scope.search = function(param) {
$http.get('AngularJs-Response.jsp?mid='+param).success(function(response) {
$scope.names = response;
});
};
$scope.cartDetails = function(smid) {
alert(smid);
};
}]);
</script>
Use simple:-
ng-click="cartDetails(x.SmId)"
I tried to use:
ng-click="cartDetails(x.SmId)"
but it simply x.SmId as string, its not replaced by value. After reading few more articles, I found a solution like below:
<div ng-click="cartDetails('{{x.SmId}}')">
Its a working solution in AngularJS v1.3.9
I am trying to use div with ng-click for routing:
ng-click="go('/item/{{item.id}}').
I can call $parent.go or even go when using ParentCtrl. But ParentCtrl_2 does not work at all. I tried to look for some answers, but can't figure it out. What am I missing?
app.controller('ParentCtrl', function($scope) {
$scope.go = function(path) {
console.log(path);
}
}
);
app.controller('ParentCtrl_2', ['$scope', '$location',
function($scope, $location) {
$scope.go = function(path) {
$location.path(path);
}
}
]);
app.controller('ChildCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
...
}
]);
There are number of unanswered questions here but, like what is the structure of your html ng-controller structure.
Also the call sytax in html is wrong for
ng-click="go('/item/{{item.id}}')
It should be
ng-click="go('/item/'+ item.id)"
Said that depending on where the ng-click is declared it would have access to parent methods. If you can access a method using $parent then you can access the method directly due to prototypal inheritance.
If structure is like
<div ng-controller='ParentCtrl'>
<div ng-controller='ParentCtrl_2'>
<div ng-controller='ChildCtrl'>
<!-- ng-click somewhere here -->
</div>
</div>
</div>
Then you access the ParentCtrl_2 method go whenever you call.
If it is
<div ng-controller='ParentCtrl'>
<div ng-controller='ParentCtrl_2'>
</div>
<div ng-controller='ChildCtrl'>
<!-- ng-click somewhere here -->
</div>
</div>
Then you have access to ParentCtrl method go method only.
Suppose you are using routes:
// bootstrap
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
});
$routeProvider.when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutCtrl'
});
...
And in your html, you want to navigate to the about page when a button is clicked. One way would be
<a href="#/about">
... but it seems ng-click would be useful here too.
Is that assumption correct? That ng-click be used instead of anchor?
If so, how would that work? IE:
<div ng-click="/about">
Routes monitor the $location service and respond to changes in URL (typically through the hash). To "activate" a route, you simply change the URL. The easiest way to do that is with anchor tags.
Go Home
Go to About
Nothing more complicated is needed. If, however, you must do this from code, the proper way is by using the $location service:
$scope.go = function ( path ) {
$location.path( path );
};
Which, for example, a button could trigger:
<button ng-click="go('/home')"></button>
Here's a great tip that nobody mentioned. In the controller that the function is within, you need to include the location provider:
app.controller('SlideController', ['$scope', '$location',function($scope, $location){
$scope.goNext = function (hash) {
$location.path(hash);
}
;]);
<!--the code to call it from within the partial:---> <div ng-click='goNext("/page2")'>next page</div>
Using a custom attribute (implemented with a directive) is perhaps the cleanest way. Here's my version, based on #Josh and #sean's suggestions.
angular.module('mymodule', [])
// Click to navigate
// similar to <a href="#/partial"> but hash is not required,
// e.g. <div click-link="/partial">
.directive('clickLink', ['$location', function($location) {
return {
link: function(scope, element, attrs) {
element.on('click', function() {
scope.$apply(function() {
$location.path(attrs.clickLink);
});
});
}
}
}]);
It has some useful features, but I'm new to Angular so there's probably room for improvement.
Remember that if you use ng-click for routing you will not be able to right-click the element and choose 'open in new tab' or ctrl clicking the link. I try to use ng-href when in comes to navigation. ng-click is better to use on buttons for operations or visual effects like collapse.
But
About
I would not recommend. If you change the route you might need to change in a lot of placed in the application. Have a method returning the link. ex:
About. This method you place in a utility
I used ng-click directive to call a function, while requesting route templateUrl, to decide which <div> has to be show or hide inside route templateUrl page or for different scenarios.
AngularJS 1.6.9
Lets see an example, when in routing page, I need either the add <div> or the edit <div>, which I control using the parent controller models $scope.addProduct and $scope.editProduct boolean.
RoutingTesting.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>
<script>
var app = angular.module("MyApp", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/TestingPage", {
templateUrl: "TestingPage.html"
});
});
app.controller("HomeController", function($scope, $location){
$scope.init = function(){
$scope.addProduct = false;
$scope.editProduct = false;
}
$scope.productOperation = function(operationType, productId){
$scope.addProduct = false;
$scope.editProduct = false;
if(operationType === "add"){
$scope.addProduct = true;
console.log("Add productOperation requested...");
}else if(operationType === "edit"){
$scope.editProduct = true;
console.log("Edit productOperation requested : " + productId);
}
//*************** VERY IMPORTANT NOTE ***************
//comment this $location.path("..."); line, when using <a> anchor tags,
//only useful when <a> below given are commented, and using <input> controls
$location.path("TestingPage");
};
});
</script>
</head>
<body ng-app="MyApp" ng-controller="HomeController">
<div ng-init="init()">
<!-- Either use <a>anchor tag or input type=button -->
<!--Add Product-->
<!--<br><br>-->
<!--Edit Product-->
<input type="button" ng-click="productOperation('add', -1)" value="Add Product"/>
<br><br>
<input type="button" ng-click="productOperation('edit', 10)" value="Edit Product"/>
<pre>addProduct : {{addProduct}}</pre>
<pre>editProduct : {{editProduct}}</pre>
<ng-view></ng-view>
</div>
</body>
</html>
TestingPage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.productOperation{
position:fixed;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-left: -15em; /*set to a negative number 1/2 of your width*/
margin-top: -9em; /*set to a negative number 1/2 of your height*/
border: 1px solid #ccc;
background: yellow;
}
</style>
</head>
<body>
<div class="productOperation" >
<div ng-show="addProduct">
<h2 >Add Product enabled</h2>
</div>
<div ng-show="editProduct">
<h2>Edit Product enabled</h2>
</div>
</div>
</body>
</html>
both pages -
RoutingTesting.html(parent), TestingPage.html(routing page) are in the same directory,
Hope this will help someone.
Another solution but without using ng-click which still works even for other tags than <a>:
<tr [routerLink]="['/about']">
This way you can also pass parameters to your route: https://stackoverflow.com/a/40045556/838494
(This is my first day with angular. Gentle feedback is welcome)
You can use:
<a ng-href="#/about">About</a>
If you want some dynamic variable inside href you can do like this way:
<a ng-href="{{link + 123}}">Link to 123</a>
Where link is Angular scope variable.
just do it as follows
in your html write:
<button ng-click="going()">goto</button>
And in your controller, add $state as follows:
.controller('homeCTRL', function($scope, **$state**) {
$scope.going = function(){
$state.go('your route');
}
})