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>
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>
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
I'm able to get seconds in Time using AngularJS and its "Interval" option but i was thing about adding milliseconds to the same with 2 digits. Below is the code. can anyone tell me on how to add milliseconds to it.
AngularJs Code
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
HTML
<div class="col-lg-2" ng-app="myApp" ng-controller="myCtrl">
<h3 style="color: blue;font-family: cursive;"><b>{{theTime}}</b></h3>
</div>
Update - On how i found the solution.
I just did the following changes. Thanks to Pranjal
AngularJS Code
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date();
$interval(function () {
$scope.theTime = new Date();
}, 1);
});
HTML
<div class="col-lg-2" ng-app="myApp" ng-controller="myCtrl">
<h3 style="color: blue;font-family: cursive;font-size: 20;margin-left: 20;"><b>{{theTime | date:'HH:mm:ss:sss a'}}</b></h3>
</div>
<body>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.CurrentDate = new Date();
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<span>{{CurrentDate | date:'HH:mm:ss:sss'}}</span>
</div>
</body>
I am new to AngularJS JavaScript. Just started learning it. I was trying with some small sample programs. Here is what I tried but its throwing error.
<body ng-app="myApp">
<div ng-controller="myCtrl">
{{time}}
<br>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.service('hexafy', ['',
function() {
this.myfunc = function(num) {
return num.toString(16);
}
}
]);
app.controller('myCtrl', ['hexafy', '$scope', '$interval',
function(hexafy, $scope, $interval) {
$scope.time = new Date().toLocaleTimeString();
$interval(function() {
$scope.time = new Date().toLocaleTimeString();
}, 1000);
// $scope.hex = hexafy.myfunc(255);
}
]);
</script>
The array syntax is used when the code is minified and keep the mapping of arguments. For more on this please see my other answer Why we Inject our dependencies two times in angularjs?.
In the code, as there is no parameter passed to the hexafy service, there is no need of using the array syntax and pass empty string.
app.service('hexafy', ['',
function() {
Use normal syntax.
app.service('hexafy', function() { // <-- Remove `[` and empty string from here
...
...
}); // <-- Remove `]` from here
var app = angular.module("myApp", []);
app.service('hexafy', function() {
this.myfunc = function(num) {
return num.toString(16);
}
});
app.controller('myCtrl', ['hexafy', '$scope', '$interval',
function(hexafy, $scope, $interval) {
$scope.time = new Date().toLocaleTimeString();
$interval(function() {
$scope.time = new Date().toLocaleTimeString();
}, 1000);
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
{{ time }}
<br />
</div>
</body>
What Tushar has suggested is perfect, Just adding working piece of Plunker
app.service('hexafy',function() {
this.myfunc = function(num) {
return num.toString(16);
}
}
);
I have an Array of Objects, with each object containing an Array of strings. I am using the ng-repeat to list all the strings, and have a button that should change to the next set of strings(by changing the object selected in the outermost array). Here is my code
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="quizRadioButton.css"/>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="quizAngularJs.js"></script>
<title>American History Quiz</title>
</head>
<body ng-app="myApp">
<div ng-controller="questionCtrl">
<form>
<h1>{{question}}</h1>
<ul>
<li ng-repeat="choice in choices"><input type="radio" name = "answer">{{choice}}</li>
<li>{{count}}</li>
</ul>
<button ng-click= "upCount()">Submit Form</button>
<button id='goBack'>Go Back</button>
</form>
</div>
</body>
And Javascript
var myApp = angular.module('myApp', []);
function questionCtrl($scope){
var allQuestions = [....];
$scope.count = 0;
$scope.question = allQuestions[$scope.count].question;
$scope.choices = allQuestions[$scope.count].choices;
$scope.upCount = function(){
$scope.count = $scope.count + 1;
};
}
Each object in the array looks something like this
{
question: "question A",
choices: ["choice 1", "choice 2", "choice 3"],
correct answer: 0
}
I did check to make sure count is updating, and it is. If the count is updating shouldn't the view update with it? I have also tried this for my function but still couldn't get it to work.
$scope.upCount = function(){
$scope.count = $scope.count + 1;
$scope.question = allQuestions[$scope.count].question;
$scope.choices = allQuestions[$scope.count].choices;
};
Thanks for the help
You can simply have allQuestions inside the scope. I dont think you need two separate modules just to track the current question. count alone should serve the purpose.
var myApp = angular.module('myApp', []);
function questionCtrl($scope){
$scope.allQuestions = [....];
$scope.count = 0;
$scope.upCount = function(){
/* make sure index don't run out of range */
if($scope.allQuestions[$scope.count + 1])
$scope.count = $scope.count + 1;
};
$scope.upCount = function(){
/* make sure index don't run out of range */
if($scope.allQuestions[$scope.count - 1])
$scope.count = $scope.count - 1;
};
}
And then in your HTML you could simply do:
<body ng-app="myApp">
<div ng-controller="questionCtrl">
<form>
<h1>{{allQuestions[count].question}}</h1>
<ul>
<li ng-repeat="choice in allQuestions[count].choices">
<input type="radio" name = "answer">{{choice}}</li>
<li>{{count}}</li>
</ul>
<button ng-click= "upCount()">Submit Form</button>
<button id='goBack'>Go Back</button>
</form>
</div>
</body>