I'm not getting result properly using append event instead of using ng-repeat in adding each name. Can you please help me how can I change added each name from a single input field. Tell me without using ng-repeat in this, because ng-repeat functionality is not working to me for my further running functionalities, you can solve this using jquery or javascript if it's possible without using ng-repeat. Thanks in advance..
Here is JSBin
var app = angular.module('myapp', ['ngSanitize']);
app.controller('AddCtrl', function ($scope, $compile) {
$scope.my = {name: 'untitled'};
$scope.add_Name = function (index) {
var namehtml = '<label ng-click="selectName($index)">{{my.name}} //click<br/></label>';
var name = $compile(namehtml)($scope);
angular.element(document.getElementById('add')).append(name);
};
$scope.selectName = function (index) {
$scope.showName = true;
};
});
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>
</head>
<body ng-controller="AddCtrl">
<button ng-click="add_Name($index)">Add Names</button>
<div id="add"></div><br/>
<form ng-show="showName">
<label>Name Change(?)</label><br/>
<input ng-model="my.name">
</form>
</body>
</html>
ng-repeat would be perfect for such cases. Not sure what makes you avoid that.
You can have a counter which will increment every time Name is added. Also pass same counter name as an argument for selectName function.
Every time selectName is called, argument value will be set as an model
Try this:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $compile) {
$scope.my = {
name: 'untitled'
};
var counter = 0;
$scope.add_Name = function(index) {
var myName = 'untitled' + counter;
var namehtml = '<label ng-click="selectName(\'' + myName + '\')">' + myName + ' //click<br/></label>';
var name = $compile(namehtml)($scope);
angular.element(document.getElementById('add')).append(name);
++counter;
};
$scope.selectName = function(val) {
$scope.my.name = val;
$scope.showName = true;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<button ng-click="add_Name($index)">Add Names</button>
<div id="add"></div>
<br/>
<form ng-show="showName">
<label>Name Change(?)</label>
<br/>
<input ng-model="my.name">
</form>
</body>
Working demo
Related
I am trying to revert the value of input box when user clicks Cancel button. What I am doing wrong here? Here show button will backup the value of a in 'temp' variable and if the user cancels the input with the help of revert button it should reflect original values.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name={}
var temp=""
$scope.name.a = {"person":"Shah"};
$scope.editOn = false
$scope.abc= function(){
$scope.editOn= true
temp=$scope.name.a
}
$scope.cde= function(){
$scope.name.a = temp
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl"><br>
{{name.a.person}} <br>
Name: <input ng-model="name.a.person" ng-show="editOn">
<button ng-click="abc()">show</button>
<button ng-click="cde()">revert</button>
</div>
</body>
</html>
There were two errors,
You are modifying temp variable everytime input value changes, so temp doesn't store the initial value anymore.
temp and name.a point to same object, they have same reference. So you'll have to copy the object so that temp and name.a have reference to different objects.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name={}
var temp=""
$scope.name.a = {"person":"Shah"};
$scope.editOn = false
temp=angular.copy($scope.name.a)
$scope.abc= function(){
$scope.editOn= true
}
$scope.cde= function(){
$scope.name.a = temp
console.log(temp)
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl"><br>
{{name.a.person}} <br>
Name: <input ng-model="name.a.person" ng-show="editOn">
<button ng-click="abc()">show</button>
<button ng-click="cde()">revert</button>
</div>
</body>
</html>
You can achieve that with ng-change and storing a string and not an object in your temp variable. See snippet below:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name={}
$scope.changeName = () => {
$scope.name.a.person = $scope.inputModel;
}
var temp=""
$scope.name.a = {"person":"Shah"};
$scope.editOn = false
$scope.abc= function(){
$scope.editOn= true
temp = $scope.name.a.person
$scope.inputModel = temp;
}
$scope.cde = function(){
$scope.inputModel = temp
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl"><br>
{{name.a.person}} <br>
Name: <input ng-change="changeName()" ng-model="inputModel" ng-show="editOn">
<button ng-click="abc()">show</button>
<button ng-click="cde()">revert</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="myApp" >
<head>
<title>myApp.html</title>
</head>
<body ng-controller="myCtrl as vm">
<br><br>
<div>
<p> Inserisci un colore <input style="background-color:{{colore}}" ng-model="colore" value="{{colore}}"> </p>
<body bgcolor="{{colore}}">
</div>
<div >
<p>Nome: <input style="background-color:{{colore}}" type="text" id="nome" onkeyup="" ng-model="vm.utente.nome"></p>
<p>Cognome: <input style="background-color:{{colore}}" type="text" id="cognome" ng-model="vm.utente.cognome"></p>
<p id="prova" value="test">{{myFunction}}</p>
<p>{{vm.saluta() | uppercase}}</p>
</div>
<p id="demo">prova</p>
<button onclick= vm.myFunction()> Prova</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="C:\Users\user1\Desktop\myCtrl.js"></script>
</body>
</html>
myCtrl.js
(function() {
'use strict';
var app = angular.module('myApp', []);
app.controller('myCtrl', function() {
var vm=this;
vm.utente = {nome: "Mario", cognome: "Rossi"};
vm.saluta = function() {
return "Buongiorno " +
this.utente.nome + " " +
this.utente.cognome + "!"
};
vm.myFunction = function() {
var text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = text.toUpperCase();
};
function test2() {
console.log("Hello!");
};
});
})();
i'm new on AngularJS and i can't understand my error. I see a lot of example in a single file (html with tag script) but i prefer to separate the controller with the html file.
in my mind, I intended to connect the controller without scope, simply replacing "this" with vm (var vm = this). I just want to do some simple tests with the functions, but i always get this error:
myApp.html: 30 Uncaught ReferenceError: vm is not defined at
HTMLButtonElement.onclick (myApp.html: 30)
the first function work normally, i get the response from the "vm.saluto()" only if i call with the format: {{vm.saluto}}. why onclick and other not work?
Any help?
where is my mistake?
I am aware of the many cases similar to this, I have already displayed, but I have not found the solution
Your example, overall, should work.
Be aware that you have two body tags.
More importantly you should understand that the vm name you defined in controller as is not the same as the vm variable, which is local to your controller's function.
Finally you should avoid direct DOM manipulations when using AngularJS.
See example below:
(function() {
'use strict';
var app = angular.module('myApp', []);
app.controller('myCtrl', function() {
var vm = this;
vm.utente = {
nome: "Mario",
cognome: "Rossi"
};
vm.saluta = function() {
return "Buongiorno " +
this.utente.nome + " " +
this.utente.cognome + "!"
};
vm.test = 'prova';
vm.myFunction = function() {
vm.test = vm.test.toUpperCase();
};
function test2() {
console.log("Hello!");
};
});
})();
<html ng-app="myApp">
<body ng-controller="myCtrl as vm">
<p>{{vm.utente.nome}}</p>
<p>{{vm.saluta()}}</p>
<button type="button" ng-click="vm.myFunction()">test</button>
<p id="demo">{{ vm.test }}</p>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
How can i bind values from shown single text box to label value ??
If i use ng-repeat in this i'm facing issues to my further functionalities.. can u pls solve this issue. i'm not able to bind between them ....Working DEMO
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope, $compile) {
$scope.my = {name: 'untitled'};
var counter=0;
$scope.add_Name = function(index) {
var myName='untitled'+counter;
var namehtml = '<label ng-click="selectName(\''+myName+'\')">'+myName+' //click<br/></label>';
var name = $compile(namehtml)($scope);
angular.element(document.getElementById('add')).append(name);
++counter;
};
$scope.selectName = function(val) {
$scope.my.name=val;
$scope.showName = true;
};
});
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="add_Name($index)">Add Names</button>
<div id="add"></div><br/>
<form ng-show="showName">
<label>Name Change(?)</label><br/>
<input ng-model="my.name">
</form>
</body>
</html>
I have updated my code, here's a working version, finally i got the result:
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope, $compile) {
$scope.my = {name: 'untitled'};
$scope.mies=[]; // added an array to store the generated values
var counter=0;
$scope.add_Name = function(index) {
$scope.mies[counter]={name: 'untitled'+counter}; // insert a new object into the array
var namehtml = '<label ng-click="selectName(mies[\''+counter+'\'])">{{mies['+counter+'].name}} //click<br/></label>';
var name = $compile(namehtml)($scope);
angular.element(document.getElementById('add')).append(name);
++counter;
};
$scope.selectName = function(val) {
$scope.my=val; // set my to val instead of my.name
$scope.showName = true;
};
});
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="add_Name($index)">Add Names</button>
<div id="add"></div><br/>
<form ng-show="showName">
<label>Name Change(?)</label><br/>
<input ng-model="my.name">
</form>
</body>
</html>
I tried to build a custom 'button' directive with the following code.But some where it went wrong could you please help me to sort it out.and here I am attaching code snippet to get a clear picture. Thanks in Advance.
<html>
<head>
<title>Custom Directives</title>
</head>
<body>
<h2>AngularJS</h2>
<div ng-app = "mainApp" ng-controller = "ButtonController">
<myButton name="Sai"></myButton><br/>
<myButton name="Bharat"></myButton>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.directive('myButton', function() {
var directive = {};
directive.restrict = 'E';
directive.transclude = true;
directive.template = "<button>{{myButton.name}}</button>";
directive.scope = {
myButton : "=name"
}
directive.compile = function(element, attributes) {
element.css("border", "1px solid #cccccc");
var linkFunction = function($scope, element, attributes) {
element.html("<button> $scope.myButton.name </button>");
}
return linkFunction;
}
return directive;
});
mainApp.controller('ButtonController', function($scope) {
$scope.Sai = {};
$scope.Sai.name = "Sai";
$scope.Bharat = {};
$scope.Bharat.name = "Bharat";
});
</script>
</body>
</html>
You are declaring directive in wrong way in html.
html name should be snake-case like this
<my-button name="Bharat"></my-button>
JSFIDDLE
I am trying to update values of variables b and c with an add method (simply incrementing their value) but a (the sum of the two) is not reflecting this operation.
I understand we can use a $scope.$watch function to update them, but I have an application with many objects dependent on other objects. If my dependent object changes I want my object to also changes without using any $watchers.
This is just a simple example where I am trying to get $scope.a and $scope.obj.a value updated with the help of watchers. How do I do this?
<html ng-app="app">
<head>
<title></title>
</head>
<body ng-controller="ctrl">
a : {{a}}<br />
b: {{b}}<br />
c: {{c}}<br />
<button ng-click="add();">Add</button>
<br /><br /><br />
obj.a : {{obj.a}}<br />
obj.b: {{obj.b}}<br />
obj.c: {{obj.c}}<br />
<button ng-click="obj.add();">obj.Add</button>
<script type="text/javascript" src="angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
$scope.b = 1;
$scope.c = 2;
$scope.a = $scope.b + $scope.c;
$scope.$watch('b', function (newValue, oldValue) {
$scope.a = $scope.b + $scope.c;
});
$scope.add = function () {
$scope.b++;
$scope.c++;
};
//this is object with dot property example
$scope.obj = {};
$scope.obj.b = 1;
$scope.obj.c = 2;
$scope.obj.a = $scope.obj.b + $scope.obj.c;
$scope.$watch('obj.b', function (newValue, oldValue) {
$scope.obj.a = $scope.obj.b + $scope.obj.c;
});
$scope.obj.add = function () {
$scope.obj.b++;
$scope.obj.c++;
};
});
</script>
</body>
</html>
You can achieve this by declaring a (or obj.a respectively) as a function instead of an object / object property. The function will automatically by re-executed by Angular each time any of the properties it uses change and therefore your "a" values will change without the need for you to explicitly define the watches.
See your updated code below:
var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
$scope.b = 1;
$scope.c = 2;
$scope.a = function() {return $scope.b + $scope.c};
$scope.add = function () {
$scope.b++;
$scope.c++;
};
//this is object with dot property example
$scope.obj = {};
$scope.obj.b = 1;
$scope.obj.c = 2;
$scope.obj.a = function() {
return $scope.obj.b + $scope.obj.c;
}
$scope.obj.add = function () {
$scope.obj.b++;
$scope.obj.c++;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">
<head>
<title></title>
</head>
<body ng-controller="ctrl">
a : {{a()}}<br />
b: {{b}}<br />
c: {{c}}<br />
<button ng-click="add();">Add</button>
<br /><br /><br />
obj.a : {{obj.a()}}<br />
obj.b: {{obj.b}}<br />
obj.c: {{obj.c}}<br />
<button ng-click="obj.add();">obj.Add</button>
</body>
</html>