In the below code data is not binding between label value to input model..
if we click on div it will shows the value of children label in input model, where i tried to change label name, but two way binding is not happening between them..
DEMO
// Code goes here
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.textVal = 'click on User Name';
$scope.selectedEvent = {};
$scope.setText = function (element) {
$scope.selectedEvent = element;
$scope.textVal = angular.element(element.currentTarget).children('label').html();
};
$scope.changeLabelText = function () {
$scope.selectedEvent.innerHTML = $scope.textVal;
angular.element(element.currentTarget).innerHTML = $scope.textVal;
};
});
<!DOCTYPE html>
<html ng-app='myapp'>
<head>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="textVal" ng-change="changeLabelText($event)">//change user name here//
<div ng-click="setText($event)">
<label>User Name</label><br/>
<input type="text" placeholder="enter username">
</div>
</body>
</html>
Updated HTML...
<input type="text" ng-model="textVal" ng-change="changeLabelText($event)">//change user name here//
<div ng-click="setText($event)">
<label>User Name</label><br/>
<input type="text" placeholder="enter username">
</div>
Update JS
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.textVal = 'click on User Name';
$scope.selectedEvent = {};
$scope.setText = function (element) {
$scope.selectedEvent = element;
$scope.textVal = angular.element(element.currentTarget).children('label').html();
};
$scope.changeLabelText = function () {
// $scope.selectedEvent.innerHTML = $scope.textVal;
// angular.elhement(element.currentTarget).innerHTML = $scope.textVal;
angular.element($scope.selectedEvent.currentTarget).children('label').html($scope.textVal)
};
});
Updated code here...
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.textVal = 'click on User Name';
$scope.selectedEvent = {};
$scope.setText = function (element) {
$scope.selectedEvent = element;
$scope.textVal = angular.element(element.currentTarget).html();
};
$scope.changeLabelText = function () {
// $scope.selectedEvent.innerHTML = $scope.textVal;
//angular.element($scope.selectedEvent.currentTarget).html($scope.textVal);
// $scope.selectedEvent.currentTarget.innerHTML = $scope.textVal;
angular.element($scope.selectedEvent.currentTarget).children('label').html($scope.textVal)
};
});
HTML Updated...
<body ng-controller="MainCtrl">
<input type="text" ng-model="textVal" ng-change="changeLabelText($event)">//change user name here//
<div ng-click="setText($event)">
<label >User Name</label><br/>
<input type="text" placeholder="enter username">
</div>
</body>
Use the angular ng-model
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.textVal = 'click on User Name';
$scope.setText = function (element) {
$scope.textVal = 'click on User Name';
$scope.changedVal = '';
};
$scope.changeLabelText = function () {
$scope.changedVal = $scope.textVal;
};
});
html
<!DOCTYPE html>
<html ng-app='myapp'>
<head>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="textVal" ng-change="changeLabelText()">//change user name here//
<div ng-click="setText()">
<label>User Name</label><br/>
<input type="text" placeholder="enter username" value="{{changedVal}}">
</div>
</body>
</html>
If you want to update the label
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.textVal = 'User Name';
$scope.setText = function (element) {
$scope.textVal = 'User Name';
};
});
html
<body ng-controller="MainCtrl">
<input type="text" ng-model="textVal" ng-change="changeLabelText()">//change label here//
<div ng-click="setText()">
<i>Click here to reset</i><br/>
<label>{{textVal}}</label><br/>
<input type="text" placeholder="enter {{textVal}}" value="">
</div>
</body>
Related
When i added ng-controller to my index.html, the expression show up as {{name || "Hello"}} and {{ age || "my friend" }}. After i removed the ng-controller, expressions aslo cannot work.
it is the controller.js
var PersonCtrl = function($scope){
$scope.name = 'sky';
$scope.age = 18;
$scope.$watch('name', function(){
console.log($scope.name);
});
$scope.$watch('age', function(){
if($scope.age < 18){
console.error('not correct');
}
});
};
it is the index.html
<!DOCTYPE html>
<!-- whole page is applied in AngularJS -->
<html ng-app>
<head>
<meta charset="utf-8">
<title>Learning of AngularJS</title>
<!-- link with AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!-- <link rel="stylesheet" href="css/home.css"> -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id ="test" ng-controller="PersonCtrl">
<h1>Name:</h1>
<input size="35" style="height:50px" type="text" ng-model="name"
placeholder="Enter your message, please.">
<h1> Age: </h1>
<input size="35" style="height:50px" type="text" ng-model="age"
placeholder="Enter your name, please.">
<hr>
<h1>{{name || "Hello"}}</h1>
<h1>{{ age || "my friend" }}!</h1>
</div>
</body>
</html>
Change your html tag to
<html ng-app="myApp">
controller.js :
// Define the Module. Only once in your code.
var myApp = angular.module('myApp', []);
// Define a controller for you module.
myApp.controller('PersonCtrl', ['$scope', function ($scope) {
$scope.name = 'sky';
$scope.age = 18;
$scope.$watch('name', function () {
console.log($scope.name);
});
$scope.$watch('age', function () {
if ($scope.age < 18) {
console.error('not correct');
}
});
}]);
I'm new to JavaScript and Node.js.
I'm trying to get a button in my webpage to call a method in my controller when clicked, but so far I'm getting no response from my controller.
How do I call the .submitEntry() function from my button?
Here's the index.html file:
<!DOCTYPE html>
<meta charset="UTF-8">
<html ng-app='app'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div ng-controller='GameController' class='container'>
<h1>Palindrome Game</h1>
<h2>Submit a new word!</h2>
<form role='form'>
<div class='form-group'>
<input ng-model="name" class='form-control' placeholder="Your name">
<input ng-model="word" class='form-control' placeholder="Word">
<button ng-click='submitEntry()' class='btn btn-default'>Submit word</button>
</div>
</form>
<h2>Top Scores</h2>
<ul class='list-group'>
<li ng-repeat="score in scores | orderBy:'-points'" class='list-group-item'>
<strong>{{score.name}}</strong> {{score.points}} points
</li>
</ul>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.js'></script>
<script src='ng/app.js'></script>
</body>
And here's the app.js file:
var app = angular.module('app', []);
const button = document.getElementById('myButton');
button.addEventListener('click', function(e)
{
console.log('button was clicked');
});
app.controller('GameController', function($scope, GameService)
{
console.log("Debug 0");
$scope.submitEntry = function()
{
if (typeof $scope.name === 'undefined' || typeof $scope.word === 'undefined')
{
return;
}
var entry = {
name: $scope.name,
word: $scope.word
};
GameService.submitEntry(entry).success(function(points)
{
$scope.word = undefined;
GameService.getScores().success(function(scores)
{
$scope.scores = scores;
});
});
};
GameService.getScores().success(function(scores)
{
$scope.scores = scores;
});
});
app.service('GameService', function($http)
{
this.getScores = function() {
return $http.get('/api/getScores');
};
this.submitEntry = function(entry) {
return $http.post('/api/submitEntry', entry);
};
});
Thank you very much! Any help that could point me in the right direction will be very appreciated.
Here's a simple button that displays an alert once clicked.
function Channels($scope) {
$scope.test = function() {
alert('button clicked!')
}
}
angular.module('app', [])
.controller('Channels', Channels);
angular.bootstrap(document.body, ['app']);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-controller="Channels">
<button ng-click="test()">
test
</button>
</body>
i've been stuck here for a while, when i'm using "form" tag everything is ok but in "div" tag ...
main.js:
var app = angular.module('demo', []);
app.controller('appctrl', function ($scope) {
$scope.start = function (name) {
console.log(name);}
}
index.html:
<!DOCTYPE html>
<html ng-app="demo">
<head>
<script src="js/angular.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container" ng-controller="appctrl">
<input id="input" autocorrect="off" spellcheck="false" autocapitalize="off" autofocus="true" placeholder="Please enter your full name" type="text" ng-model="name">
<div id="button" ng-click="show()">Start Demo</div>
</div>
</body>
</html>
I think you need this, you need to name the function as show , also you need to pass parameter to the function show.
additionaly you are missing ) in your controller.
app.controller('appctrl', function ($scope) {
$scope.show = function (name) {
console.log(name);}
}
DEMO
var app = angular.module('demo', []);
app.controller('appctrl', function ($scope) {
$scope.start = function (name) {
console.log(name);
}
});
<!DOCTYPE html>
<html ng-app="demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body>
<div id="container" ng-controller="appctrl">
<input id="input" autocorrect="off" spellcheck="false" autocapitalize="off" autofocus="true" placeholder="Please enter your full name" type="text" ng-model="name">
<div id="button" ng-click="start('TEST')">Start Demo</div>
</div>
</body>
</html>
app.controller('appctrl', function ($scope) {
$scope.name = null;
$scope.show = function (name) {
console.log(name);
}
});
<div id="container" ng-controller="appctrl">
<input id="input" autocorrect="off" spellcheck="false" autocapitalize="off" autofocus="true" placeholder="Please enter your full name" type="text" ng-model="name">
<div id="button" ng-click="show(name)">Start Demo</div>
</div>
You're calling show() but you defined start()
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName =false;
$scope.toggle = function(){
$scope.firstName =!$scope.firstName ;
};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click=toggle()>ToGgLe</button>
<input type="text" ng-disabled="{{firstName}}">
</div>
</body>
</html>
Here i'm trying to toggle the input field with the function as shown in code.I can see the value changing in the DOM but it is not rendered by angular properly...input is not toggling...Help me out...Thanks in advance
You don't need to do string interpolation, as ngDisabled accepts a expression pass direct firstName .
<input type="text" ng-disabled="firstName">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName =false;
$scope.toggle = function(){
$scope.firstName =!$scope.firstName ;
};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click=toggle()>ToGgLe</button>
<input type="text" ng-disabled="firstName">
</div>
</body>
</html>
You don't have to use interpolation operator {{}}
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName =false;
$scope.toggle = function(){
$scope.firstName =!$scope.firstName ;
};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click=toggle()>ToGgLe</button>
<input type="text" ng-disabled="firstName">
</div>
</body>
</html>
i am learning AngularJs, any help is much appreciated, trying to display the div content that is checked, if nothing checked the div with 'selected' class name should appear.
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input type="checkbox" class="myCheckbox" ng-model="aCheck" ng-change="checkbox1Func()">A
<input type="checkbox" class="myCheckbox" ng-model="bCheck" ng-change="checkbox2Func()">B
<div ng-if="selected">Hello from div container</div>
<div ng-if="aCheck">Hello from checkbox1</div>
<div ng-if="bCheck">Hello from checkbox2</div>
</body>
</html>
And the script
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.selected=true;
$scope.checkbox1Func=function(a){
$scope.selected=false;
};
$scope.checkbox2Func=function(b){
$scope.selected=false;
};
if($scope.aCheck === false && $scope.bCheck===false){
$scope.selected=true;
}
// $('.myCheckbox').click(function() {
// $(this).siblings('input:checkbox').prop('checked', false);
// });
});
Your existing logic will work if you check the if condition
if($scope.aCheck === false && $scope.bCheck===false){
$scope.selected=true;
}
inside both the functions checkbox1Func and checkbox2Func.
Wrap the check inside a function and call it on the ng-change event,
$scope.valid = function() {
if ($scope.aCheck === false && $scope.bCheck === false) {
$scope.selected = true;
}
}
HTML
<input type="checkbox" class="myCheckbox" ng-model="aCheck" ng-change="checkbox1Func();valid();">A
<input type="checkbox" class="myCheckbox" ng-model="bCheck" ng-change="checkbox2Func();valid();">B
DEMO
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.selected = true;
$scope.checkbox1Func = function(a) {
$scope.selected = false;
};
$scope.checkbox2Func = function(b) {
$scope.selected = false;
};
$scope.valid = function() {
if ($scope.aCheck === false && $scope.bCheck === false) {
$scope.selected = true;
}
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input type="checkbox" class="myCheckbox" ng-model="aCheck" ng-change="checkbox1Func();valid();">A
<input type="checkbox" class="myCheckbox" ng-model="bCheck" ng-change="checkbox2Func();valid();">B
<div ng-if="selected">Hello from div container</div>
<div ng-if="aCheck">Hello from checkbox1</div>
<div ng-if="bCheck">Hello from checkbox2</div>
</body>
</html>