AngularJS , pushing empty element - angularjs

Im quite new with angular. What am i freaky about is that following code is showing empty buttons (edit/delete) even if it looks empty (on start) :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="todoCtrl">
<h2>todo</h2>
<form ng-submit="todoAdd(item)">
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="submit" value="Add New">
</form>
<br>
<div ng-repeat="x in todoList">
<span ng-bind="x.todoText"></span><button id="#edit" ng-click="edit(item)">edit</button><button ng-click="remove(item)">delete</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('todoCtrl', function($scope) {
$scope.todoList = [{}];
$scope.todoAdd = function(item) {
$scope.todoList.push({todoText:$scope.todoInput);
$scope.todoInput = "";
};
$scope.remove = function(item) {
var index = $scope.todoList.indexOf(item);
$scope.todoList.splice(index, 1);
};
$scope.edit = function(item) {
//function
};
});
</script>
</body>
</html>
And also can somebody to help me after clicking on edit to push todoText to input and change caption of addnew to save? and afterthen change it to addNew again?
Thank you very much


Replace line
$scope.todoList = [{}];
to
$scope.todoList = [];
Then, it wouldn't show you empty line.
//Full code.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="todoCtrl">
<h2>todo</h2>
<form>
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="button" value="{{actionName}}" ng-click="todoAdd()" />
</form>
<br>
<div ng-repeat="x in todoList">
<span>{{x.todoText}}</span><button id="#edit" ng-click="edit(x)">edit</button><button ng-click="remove(item)">delete</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('todoCtrl', function($scope) {
$scope.todoList = [];
$scope.actionName = 'Add';
$scope.todoAdd = function() {
if($scope.actionName === 'Add'){
$scope.todoList.push({todoText:$scope.todoInput});
$scope.todoInput = "";
} else {
var index = $scope.todoList.indexOf($scope.temp);
console.log('index: ' + index);
$scope.todoList.splice(index, 1, {todoText:$scope.todoInput});
$scope.actionName = 'Add';
}
};
$scope.remove = function(item) {
var index = $scope.todoList.indexOf(item);
$scope.todoList.splice(index, 1);
};
$scope.edit = function(item) {
$scope.todoInput=item.todoText;
$scope.temp = item;
$scope.actionName = 'Save';
};
});
</script>
</body>
</html>

Related

Not able to run angularjs code on the computer

Not able to run the angular js code in the following program on my pc. It is working in the plunker editor online.Please let me know if i need to download any thing before i will be able to run the code . Thanks in advance
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The angularjs app!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script src="C:\Users\komar\Desktop\script.js"></script>
</head>
<body>
<div ng-app="MyModule" ng-controller="MyController as ctrl">
<b>Invoice:</b><br>
<div>
Quantity:<input type = "number" min = 0 ng-model = "ctrl.quantity" required><br>
Costs:<input type = "number" min=0 ng-model="ctrl.costs" required>
<select ng-model="ctrl.selCur">
<option ng-repeat = "c in ctrl.currencies">{{c}}</option>
</span><br>
<b>Total:</b><span ng-repeat= "c in ctrl.currencies">
{{ctrl.convert(c) | currency:c}}
</span><br>
<button class ="btn" ng-click="ctrl.createAlert()">Pay</button>
</div>
</div>
</body>
</html>
Javascript code:
var app = angular.module('MyModule');
app.controller('MyController',[MyService,function MyController(MyService){
this.quantity = 1;
this.costs =2;
this.selCur = 'EUR';
this.currencies = MyService.currencies;
var convert = function(baseCur){
return MyService.currentCurrencies(this.quantity*this.costs,this.selCur,baseCur);
}
this.createAlert = function createAlert(){
window.alert('Thanks!');
};
}]);
app.factory('MyService',function(){
var currencies= ['USD','EUR','CNY'];
var values = {
USD: 1,
EUR: 0.88,
CNY: 6.72
};
var currentCurrencies = function(amount,selCur,baseCur){
return amount*values(selCur)/values(baseCur);
}
return {
currentCurrencies: currentCurrencies,
currencies: currencies
};
});
I am not able to run this code . please help me fix the issues and help run the code
Even this code is not working
HTML code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-guide-concepts-21-production</title>
<script src="//code.angularjs.org/1.7.7/angular.min.js"></script>
<script src="finance2.js"></script>
<script src="invoice2.js"></script>
</head>
<body >
<div ng-app="invoice2" ng-controller="InvoiceController as invoice">
<b>Invoice:</b>
<div>
Quantity: <input type="number" min="0" ng-model="invoice.qty" required >
</div>
<div>
Costs: <input type="number" min="0" ng-model="invoice.cost" required >
<select ng-model="invoice.inCurr">
<option ng-repeat="c in invoice.currencies">{{c}}</option>
</select>
</div>
<div>
<b>Total:</b>
<span ng-repeat="c in invoice.currencies">
{{invoice.total(c) | currency:c}}
</span><br>
<button class="btn" ng-click="invoice.pay()">Pay</button>
</div>
</div>
</body>
</html>
script files
(function(angular) {
'use strict';
angular.module('finance2', [])
.factory('currencyConverter', function() {
var currencies = ['USD', 'EUR', 'CNY'];
var usdToForeignRates = {
USD: 1,
EUR: 0.74,
CNY: 6.09
};
var convert = function(amount, inCurr, outCurr) {
return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];
};
return {
currencies: currencies,
convert: convert
};
});
})(window.angular);
(function(angular) {
'use strict';
angular.module('invoice2', ['finance2'])
.controller('InvoiceController', ['currencyConverter', function InvoiceController(currencyConverter) {
this.qty = 1;
this.cost = 2;
this.inCurr = 'EUR';
this.currencies = currencyConverter.currencies;
this.total = function total(outCurr) {
return currencyConverter.convert(this.qty * this.cost, this.inCurr, outCurr);
};
this.pay = function pay() {
window.alert('Thanks!');
};
}]);
})(window.angular);

You have to change the
var app = angular.module('MyModule');
to
var app = angular.module('MyModule', []);
Check the []
Also
app.controller('MyController',[MyService,function MyController(MyService){
To
app.controller('MyController',["MyService",function MyController(MyService){
Check the " in MyService
Few more fixes
There are some more fixes,
You have to close the tag.
return amount*values[selCur]/values[baseCur]; <- Here changed ( to [
var convert = has to be changed to this.convert =

Please use <script></script> instead <script src="C:\Users\komar\Desktop\script.js"></script>, and copy your JavaScript between the script tag.

Find the updated code below
var app = angular.module('MyModule', []);
app.controller('MyController', ["MyService", function MyController(MyService) {
this.quantity = 1;
this.costs = 2;
this.selCur = 'EUR';
this.currencies = MyService.currencies;
var convert = function(baseCur) {
return MyService.currentCurrencies(this.quantity*this.costs, this.selCur, baseCur);
}
this.createAlert = function createAlert() {
window.alert('Thanks!');
};
}]);
app.factory('MyService', function() {
var currencies = ['USD', 'EUR', 'CNY'];
var values = {
USD: 1,
EUR: 0.88,
CNY: 6.72
};
var currentCurrencies = function(amount, selCur, baseCur) {
return amount*values(selCur)/values(baseCur);
}
return {
currentCurrencies: currentCurrencies,
currencies: currencies
};
});
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The angularjs app!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="MyModule" ng-controller="MyController as ctrl">
<b>Invoice:</b><br>
<div>
Quantity:<input type = "number" min = 0 ng-model = "ctrl.quantity" required><br>
Costs:<input type = "number" min=0 ng-model="ctrl.costs" required>
<select ng-model="ctrl.selCur">
<option ng-repeat = "c in ctrl.currencies">{{c}}</option>
</span><br>
<b>Total:</b><span ng-repeat= "c in ctrl.currencies">
{{ctrl.convert(c) | currency:c}}
</span><br>
<button class ="btn" ng-click="ctrl.createAlert()">Pay</button>
</div>
</div>
</body>
</html>

Your HTML code is correct you just need to change the script.js file code with following code.
var app = angular.module('MyModule', []);
app.controller('MyController',['$scope','MyService',function MyController(MyService, $scope){
this.quantity = 1;
this.costs =2;
this.selCur = 'EUR';
this.currencies = MyService.currencies;
var convert = function(baseCur){
return MyService.currentCurrencies(this.quantity*this.costs,this.selCur,baseCur);
}
this.createAlert = function createAlert(){
window.alert('Thanks!');
};
}]);
app.factory('MyService',function(){
var currencies= ['USD','EUR','CNY'];
var values = {
USD: 1,
EUR: 0.88,
CNY: 6.72
};
var currentCurrencies = function(amount,selCur,baseCur){
return amount*values(selCur)/values(baseCur);
}
return {
currentCurrencies: currentCurrencies,
currencies: currencies
};
});

angular js The ng-model name looks like 'choice.gorntu'. I want pz1, pz2 etc. to be written in ng-model part

enter image description here
The ng-model name looks like 'choice.gorntu'. I want pz1, pz2 etc. to be written in ng-model part. I did not get it. My English is not very good.
html
<div ng-repeat="choice in choices">
<input type="text" -ng-model='choice.gorntu' name="{{choice.isim}}" >
</div>
<input type="button" value='add' ng-click="addNewchoice()">
css
var benimapp =angular.module("myapp",[]);
benimapp.controller("control",function($scope){
$scope.choices = [{id: 'txt1',isim:'monday1',gorntu:'pz1'},{id:
'txt2',isim:'monday2',gorntu:'pz2'}];
$scope.addNewchoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'txt'+newItemNo ,isim:'monday'+newItemNo, gorntu:'pz'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});

Try this one
<!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="control">
<div ng-repeat="choice in choices">
<input type="text" ng-model='choice.gorntu' name="{{choice.isim}}" >
</div>
<input type="button" value='add' ng-click="addNewchoice()">
</div>
<script>
var benimapp =angular.module("myapp",[]);
benimapp.controller("control",function($scope){
$scope.choices = [{id: 'txt1',isim:'monday1',gorntu:'pz1'},{id:
'txt2',isim:'monday2',gorntu:'pz2'}];
$scope.addNewchoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'txt'+newItemNo ,isim:'monday'+newItemNo, gorntu:'pz'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
</script>
</body>
</html>

How do I send a div value to a function in angular controller

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already in your shopping list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span></li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
<p>{{errortext}}</p>
</div>
</body>
</html>
The line <input ng-model="addMe"> takes the input values and adds to the list
What if I want to define a <div> instead of <input> to send the value to my controller instead of <input> ? I have been trying this for long now and can not get a value enclosed between <div> and </div> sent over to the controller.

Just put your x as parameter on addToCart to add it to cart in the controller.
See demo here.

Set attribute for dynamically added each elements

How can i set 'type attribute' for each added dynamic buttons?
In below code, label names were changing perfectly,, and also i could able to set 'type attribute' to first added button, but remaining button types are not changing properly.. can u pls check it out and solve this to me pls ..
Working DEMO
Updated:
var app = angular.module('myapp', ['ngSanitize']);
app.controller('MainCtrl', function($scope, $compile) {
var counter = 0;
$scope.buttonFields = [];
$scope.add_Button = function(index) {
$scope.buttonFields[counter] = {button: 'Submit'};
var buttonhtml = '<div ng-click="selectButton(buttonFields[\'' + counter + '\'])"><button id="button_Type">{{buttonFields[' + counter + '].button}}</button>//click//</div>';
var button = $compile(buttonhtml)($scope);
angular.element(document.getElementById('add')).append(button);
$scope.changeTosubmit = function () {
var el = document.getElementById("button_Type");
el.setAttribute("type", "submit");
compile(el);
};
$scope.changeToreset = function () {
var el = document.getElementById("button_Type");
el.setAttribute("type", "reset");
compile(el);
};
$scope.changeTocancel = function () {
var el = document.getElementById("button_Type");
el.setAttribute("type", "cancel");
compile(el);
};
++counter;
};
$scope.selectButton = function (val) {
$scope.buttonField = val;
$scope.showButton_Types = true;
};
});
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="add_Button($index)">Add Buttons</button>
<hr>
<div id="add"></div>
<form ng-show="showButton_Types">
<div>
<label>Button Name(?)</label><br/>
<input ng-model="buttonField.button">
</div>
<div>
<label>change button types(?)</label><br/>
<input ng-click="changeTosubmit()" name="submit" type="radio"> Submit
<input ng-click="changeToreset()" name="submit" type="radio"> Reset
<input ng-click="changeTocancel()" name="submit" type="radio"> Cancel
</div>
</form>
</body>
</html>

You're selecting "all the buttons" via document.getElementById("button_Type"). That's the problem: getElementById returns the first item it can find with the given id.
Try to use document.querySelectorAll() instead (which will always return an array).

How to call controller function from other controller angularjs

please look at this code. My button must call function checkResults() from controller CtrlTwo.
How to do this?
var myApp = angular.module('myApp', []);
function CtrlOne($scope){
$scope.greet = 'Hi! ';
}
function CtrlTwo($scope){
$scope.$emit('checkResults', function(){
alert('Function is called!');
}
);
}
<body ng-app="myApp">
<div ng-controller="CtrlOne">
{{greet}}
<input type="submit" class="btn btn-primary pull-right" value="Check results" ng-href='#here' ng-click='checkResults()'/>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</body>

Here, hopefully this example will help you:
Javascript:
var myApp = angular.module('myApp', []);
myApp.controller('CtrlOne', function($scope){
$scope.greet = "hi!"
var nTimes = 0;
$scope.$on('myEvent', function(){
$scope.greet = "Hi! The event has been called " + (++nTimes) + " times";
});
});
myApp.controller('CtrlTwo', function($scope){
$scope.emitCustomEvent = function(){ $scope.$emit('myEvent'); };
});
View:
<div ng-app="myApp">
<div ng-controller="CtrlOne">
{{greet}}
<div ng-controller="CtrlTwo">
<input type="button" value="Check results" ng-click="emitCustomEvent()" >
</div>
</div>
</div>
Working Example

Resources