I just started to learn Angular, and I tried to make concat var name so I can control it dynamically.
This is what I tried -
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc(1)">Click Me!</button>
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showMe1 = false;
$scope.myFunc = function(x) {
var nametocng = 'showMe'+x;
//var nametocng = $parse("showMe"+x); // - I tried this also
$scope.nametocng = !$scope.nametocng;
}
});
</script>
use $scope[variable] for dynamic.
From your comment: In the end, I want to make multiple Toggles, but I want one function for all of them. and then, every button will handle one toggle
You can use ng-repeat for button to handle different menu's
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-repeat="button in array" ng-click="myFunc(button)">Click Me!</button>
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza1</div>
<div>Pasta1</div>
<div>Pesce1</div>
</div>
<div ng-show="showMe2">
<h1>Menu:</h1>
<div>Pizza2</div>
<div>Pasta2</div>
<div>Pesce2</div>
</div>
{{nametocng}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.array = [1,2];
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.myFunc = function(x) {
angular.forEach($scope.array, function(value, key){
$scope['showMe'+value] = false
});
var nametocng = 'showMe'+x;
//var nametocng = $parse("showMe"+x); // - I tried this also
$scope[nametocng] = !$scope[nametocng];
}
});
</script>
</body>
</html>
Please run the above snippet
Here is a DEMO
If you have a dynamic variable name, you need to access via [] syntax. It will evaluate the variable's value and use that value as a property name.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc(1)">Click Me!</button>
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showMe1 = false;
$scope.myFunc = function(x) {
var nametocng = 'showMe'+x;
//var nametocng = $parse("showMe"+x); // - I tried this also
$scope[nametocng] = !$scope[nametocng];
}
});
</script>
Try using this
you have keep condition on click and check against concat string
Js code
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.showMe1 = false;
$scope.nametocng = 'showMe1';
$scope.myFunc = function(x) {
var nametocng = 'showMe' + x;
$scope.showMe1 = $scope.nametocng === nametocng; // result will bool
}
});
HTML
<div ng-app='myApp'>
<div ng-controller='ctrl'>
<button ng-click="myFunc(1)">Click Me!</button>
{{showMe1}} {{nametocng}}
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
</div>
Jsfiddle link
Related
I'm new to AngularJS. I was trying to find the center point on the page with JavaScript then bind it to the $scope object. I'm not entirely sure if I bound the JavaScript variables correctly. After I did that, I was trying to preview the values in my HTML page. When I ran the code it threw an error message.
<script type="text/javascript">
var Page_Center_Width = $(window).width() / 2;
var Page_Center_Height = $(window).height() / 2;
</script>
<script>
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope, $interval, $window) {
$scope.Window_Width = $window.Page_Center_Width;
$scope.Window_Height = $window.Page_Center_Height;
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl" >
<div >Window-Width: {{Window_Width}}</div>
<div >Window-Height: {{Window_Height}}</div>
</div>
var Page_Center_Width = $(window).width() / 2;
var Page_Center_Height = $(window).height() / 2;
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope, $interval, $window) {
$scope.Window_Width = $window.Page_Center_Width;
$scope.Window_Height = $window.Page_Center_Height;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">
<div>Window-Width: {{Window_Width}}</div>
<div>Window-Height: {{Window_Height}}</div>
</div>
You have different problem at your snippet. You put script tag on javascript section.
var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope, $interval, $window) {
$scope.Window_Width = $window.Page_Center_Width;
$scope.Window_Height = $window.Page_Center_Height;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">
<div>Window-Width: {{Window_Width}}</div>
<div>Window-Height: {{Window_Height}}</div>
</div>
<script type="text/javascript">
var Page_Center_Width = 3434;
var Page_Center_Height = 1222;
</script>
When page refresh I want to return data from scope to textbox value. How can I do it with only update button?
Example: Plunker
Make this changes in your plunker index.html
<script>
angular.module("example", ["ngStorage"])
.controller("ExampleController", function($scope, $localStorage) {
$scope.save = function() {
$localStorage.message = $scope.zafer;
console.log(zafer);
}
$scope.load = function() {
$scope.zafer = $localStorage.message;
}
})
</script>
</head>
<body ng-app="example">
<div ng-controller="ExampleController" ng-init="load()">
<input type="text" ng-model="zafer">
<button ng-click="save()">Update</button>
</div>
</body>
I am trying to create a form that users can press the '+' sign and add a new line. I do this by calling a function when a button is clicked and then pushing a new line into the array. The new lines are not being created, however. The function below that removes the line seems to be working.
Here is the js:
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', '$q', function($scope, $q) {
$scope.arr = [1,2];
$scope.addLine = function(index){
$scope.arr.push();
}
$scope.removeLine = function(index){
$scope.arr.splice(index, 1);
}
}]);
You need to push something into the array.
Push() Definition and Usage:
The push() method adds new items to the end of an array, and returns the new length.
Note: The new item(s) will be added at the end of the array.
Note: This method changes the length of the array.
Tip: To add items at the beginning of an array, use the unshift() method.
http://www.w3schools.com/jsref/jsref_push.asp
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope',
function($scope) {
$scope.arr = [1, 2];
$scope.addLine = function(index) {
$scope.arr.push(index);
}
$scope.removeLine = function(index) {
$scope.arr.splice(index, 1);
}
}
]);
<!doctype html>
<html ng-app="myApp">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<button name="addLine" ng-click="addLine(arr.length+1)">Add Line</button>
{{ arr | json}}
<ul>
<li data-ng-repeat="x in arr">
{{ x }} - <button name="addLine" ng-click="removeLine($index)">Remove Line</button>
</li>
</ul>
</div>
</body>
</html>
Look this:
var app = angular.module('App', []);
app.controller('AppController', ['$scope', function($scope) {
$scope.arr = [1,2];
$scope.addLine = function(last){
$scope.arr.push(last + 1);
}
$scope.removeLine = function(index){
$scope.arr.splice(index, 1);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
<button ng-click="addLine(arr.length)">Add Line</button>
<hr/>
<div data-ng-repeat="x in arr">
Line: {{x}} <button ng-click="removeLine($index)">Del</button>
</div>
</div>
I have to change the content of the button to ON on mouseenter and to OFF on mouseleave using Angular.
<html ng-app="myApp" ng-controller="homeCtrl">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('homeCtrl', function ($scope) {
$scope.alert = function () {
this.myHTML = OFF;
};
$scope.text = function () {
this.myHTML = ON;
};
})
</script>
</head>
<body>
<button ng-mouseenter="alert();" ng-mouseleave="text();"> OFF </button>
</body>
</html>
$scope.alert = function () {
$scope.text = 'OFF';
};
$scope.text = function () {
$scope.text = 'ON';
};
and
<button ng-mouseenter="alert();" ng-mouseleave="text();">{{text}}</button>
Why not use binding instead?
<html ng-app="myApp" ng-controller="homeCtrl">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('homeCtrl', function ($scope) {
$scope.alert = function () {
$scope.value = "OFF";
};
$scope.text = function () {
$scope.value = "ON";
};
$scope.value="OFF"
})
</script>
</head>
<body>
<button ng-mouseenter="alert();" ng-mouseleave="text();"> {{value}} </button>
</body>
</html>
The two script statements below work independently however when they are combined it causes Error: [$injector:unpr] Unknown provider: searchNameFilterProvider <- searchNameFilter Can anyone explain why this occurs?
1st segement
Find Person: <input type="text" ng-model="myName">
<ul ng-init="people = ['Diarmuid','Aine','Dave','Declan']">
<li ng-repeat="person in people | filter:myName">{{ person | searchName}}</li>
</ul>
<script>
var app = angular.module('myApp',[]);
app.filter('searchName',function(){
return function (input){
return input + '!';
}
})
</script>
2nd segement
<div ng-controller="myCtrl">
<button ng-click="myFunc()">Hello World Button</button>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function ($scope) {
$scope.myFunc = function () {
console.log('Hello world!');
};
});
</script>
<div ng-app="myApp">
<script src="Scripts/Angular.js" type="text/javascript"></script>
Find Person:
<input type="text" ng-model="myName">
<ul ng-init="people = ['Diarmuid','Aine','Dave','Declan']">
<li ng-repeat="person in people | filter:myName">{{ person | searchName}}</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.filter('searchName', function () {
return function (input) {
return input + '!';
};
});
</script>
<div ng-controller="myCtrl">
<button ng-click="myFunc()">
Hello World Button</button>
</div>
<script>
var app = angular.module('myApp');
app.controller('myCtrl', function ($scope) {
$scope.myFunc = function () {
console.log('Hello world!');
};
});
</script>
There should only be a single module intialization in your code. Fixing the repeated intialization solves the problem.
var app = angular.module('myApp', []);
Here is the documentation from the AngularJS docs.
"Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module"
You could read more about the modules here. AngularJS Modules
var app = angular.module('myApp', []);
app.filter('searchName', function() {
return function(input) {
return input + '!';
}
});
app.controller('myCtrl', function($scope) {
$scope.myFunc = function() {
console.log('Hello world!');
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
Find Person:
<input type="text" ng-model="myName">
<ul ng-init="people = ['Diarmuid','Aine','Dave','Declan']">
<li ng-repeat="person in people | filter:myName">{{ person | searchName}}</li>
</ul>
<div ng-controller="myCtrl">
<button ng-click="myFunc()">Hello World Button</button>
</div>
</div>