I am using a checkbox binded to a $scope variable in AngularJS. My code is something like:
<input type="checkbox" ng-model="value.selected"> and I have an object in my controller $scope.value which has the selected property. The changes in the DOM i.e. clicking the checkbox changes the values of the selected property in the value object but the vice versa, i.e. if I change the selected property in the controller it doesn't change the DOM checkbox. Any suggestions or workarounds would be welcome.
Button select selects checkbox and button deselect - deselects it:
<!doctype html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Angular Ajax with PHP</title>
</head>
<body>
<h2>The form</h2>
<div ng-app="myApp" ng-controller="mainController">
<input type="checkbox" ng-model="value.selected"/>
<p>{{value.selected}}</p>
<button ng-click="select()">Select</button>
<button ng-click="deselect()">Deselect</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller('mainController',function($scope){
$scope.value = {
selected:false
};
$scope.select = function(){
$scope.value.selected = true;
}
$scope.deselect = function() {
$scope.value.selected = false;
}
});
</script>
</body>
</html>
Related
I know there are multiple questions related to my issue, but I still have problem fixing this. I have the following html and JavaScript code:
<!doctype html>
<html ng-app="Demo">
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body ng-controller="AppController">
<input type="" name="" ng-model="docs[1].value">
{{m3.value}}
{{m4}}
<script type="text/javascript">
var app = angular.module('Demo', []);
app.controller(
"AppController",
function( $scope ) {
$scope.docs=[{value:"first doc"}, {value:"second doc"}];
$scope.m3=$scope.docs[1];
$scope.m4=$scope.docs[1].value;
}
);
</script>
</body>
</html>
When I type in the input, the m3.value gets updated but m4 does not! I can't figure out why this is happening. Any comment is appreciated.
Statement 1 :
$scope.m3=$scope.docs[1];
This statement storing the reference for model docs[1]
so, {{m3.value}} will get updated model value.
Statement 2 :
$scope.m4=$scope.docs[1].value;
This statement copying the actual primitive value.
so, {{m4}} still get old value
Ok so the way I solved it is to add a watcher to m3.value:
$scope.$watch('m3.value', function(){
console.log('Changing');
$scope.m4 = $scope.m3.value;
});
And now $scope.m4 updates.
I have a form that has a textfield where you can write a message, but I want to give the user a set of tokens to ease the typing of those tokens.
For this I want to have a set of buttons that when clicked they add their respective token to the message, so if i have:
<button>name</button>
<button>product_description</button>
<input ng-model = "message"></input>
And in the input if Im writing "Hi," and I click "name" the input changes to "hi, {{name}}" so i can continue writing "Hi, {{name}}, we present you" and when I click the other button the exact same thing happens but with "product_description" like: "Hi, {{name}}, we present you{{product_description}}".
anThis way the user can write his/her message and personalize it with my set of tokens without him/her writing said tokens.
Note:
I want to send the curly braces for later processing, the button will add to the text of the input field: '{{' + button_val + '}}'
With the help of ng-click attribute for button tag, you can make a function call that would append the value to the model value set by the input field.
var app = angular.module('myModule', []);
app.controller('myController', ['$scope', function($scope) {
$scope.input = '';
$scope.name = '';
$scope.addName = function(name) {
$scope.name = ' user';
$scope.input = $scope.input + $scope.name;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myModule">
<div ng-controller="myController">
<input type="text" ng-model="input" />
<button ng-click="addName()">User</button>
<h1>{{input}}</h1>
</div>
</div>
By using the ng-click you can achieve required functionality.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ng-click-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="">
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
<span>
count: {{count}}
</span>
</body>
</html>
protractor.js
it('should check ng-click', function() {
expect(element(by.binding('count')).getText()).toMatch('0');
element(by.css('button')).click();
expect(element(by.binding('count')).getText()).toMatch('1');
});
here is the link of plunker
I do not know why I can not trigger a click event on my controller upon page load. What I want is the checkboxed to be click literally.
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</head>
<body ng-app="ngToggle">
<div ng-controller="AppCtrl">
<input type="checkbox" ng-model="dean" ng-click="btnChange($event, values, 1)" id="one" name="one" class="here" >
<input type="checkbox" ng-model="armada" ng-click="btnChange($event, values, 2)" id="two" name="one" class="here" >
<!--<p ng-repeat="btn in btns">-->
<!-- <input type="checkbox" ng-model="btn.bool" class="here" > {{ btn.value }}-->
<!--</p>-->
{{btn }}
{{values }}
</div>
<script type="text/javascript">
angular.module('ngToggle', [])
.controller('AppCtrl',['$scope', function($scope){
$scope.btns = [{}, {}, {}];
$scope.values = [];
$scope.btnChange = function(event, model, val){
_this = angular.element(event.target);
x = _this.prop("checked");
if(x){
model.push(val);
}else{
index = model.indexOf(val);
model.splice(index, 1);
}
};
angular.element("#one").triggerHandler("click");
}]);
</script>
</body>
</html>
Here is the plunker: http://plnkr.co/edit/7DpCvkKLlKhRc3YwFTq0?p=preview
I see that you have used jQuery on the page. So you can simply do this :
$(function(){
angular.element("#one").trigger("click");
});
A complete jQuery solution would be :
$(function(){
$("#one").click();
});
A complete angular solution would be (like others mentioned) :
angular.element(document).ready(function() {
angular.element("#one").trigger("click");
});
http://plnkr.co/edit/0OHDIVB2JGqDZnF56E6M?p=preview
You are triggering the code to click when the document is not completely ready/rendered so you need to wait till the entire document(or in this case, your checkbox) is loaded and only then you can perform actions on your elements.
You can place it on controller like this
angular.element(document).ready(function() {
angular.element("#one").trigger("click");
});
Here is the Plunker
You just need to add a small timeout to trigger a click
$timeout(function() {
angular.element('#one').click();
}, 100);
I have updated your plunker link check it out Plunker
Or You can do
angular.element(document).ready(function() {
angular.element("#one").trigger("click");
});
Hello, I am new to Angularjs. Below is my code :
.html file :
<!DOCTYPE html>
<html ng-app="showcase.angularWay.dataChange">
<head>
<script src='js/jquery-1.11.3.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src='js/main.js'></script>
</head>
<body>
<div ng-controller="AngularWayChangeDataCtrl as showCase">
<input type='text' value="{{showCase.demo}}" />
{{showCase.demo}}
</div>
</body>
</html>
.js file :
angular.module('showcase.angularWay.dataChange', ['ngResource'])
.controller('AngularWayChangeDataCtrl', AngularWayChangeDataCtrl);
function AngularWayChangeDataCtrl($scope)
{
var vm = this;
vm.demo = "hello";
}
Output
When I enter any new text in input field then it doesn't update previously present text. (as shown in attached image).
You didn't provide model
Try like this
<input type='text' ng-model="showCase.demo" />
DEMO
I'm new in Angular, so maybe I missing something. Does anybody know, what's wrong with expression state in such case:
The value 'isDisable.state' change in 'p' tag, but not in 'ng-disabled'. The button doesn't change it state to disabled.
Here is the plunk:http://plnkr.co/edit/zc8k9oCUxlMRCkZKjQa5?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example53-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module('switcher',[]);
myapp.controller('switchState', function ($scope) {
$scope.isDisable = {'state':false};
$scope.toggle = function () {
$scope.isDisable.state = !$scope.isDisable.state;
}
});
</script>
</head>
<body ng-app="switcher">
<div ng-controller="switchState">
<button ng-click="toggle()">toggle</button>
<button ng-disabled="{{isDisable.state}}">Disabled</button>
<p>{{isDisable.state}}</p>
</div>
</body>
</html>
Remove the {{}}
ng-disabled="isDisable.state"