I want to store value from checkbox into string
<label style="color:black; text-decoration:none; font-size:15px" href="#">
<input type="checkbox" ng-model="diet.v1" ng-true-value="'&diet=high-fiber'" ng-false-value="''" />High-Fiber</label>
How do i get value from ng-true-value (when it's checked) to string so i can use it ?
when i try something like this console.log(diet.v1); in js it wont work
Please check the following working sample code with ng-true-value, ng-false-value.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-checkbox-input-directive-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="checkboxExample">
<script>
angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.diet = {
v1 : ''
};
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
<label>Value:
<input type="checkbox" ng-model="diet.v1"
ng-true-value="'&diet=high-fiber'" ng-false-value="''">
</label><br/>
<tt>value = {{diet.v1}}</tt><br/>
</form>
</body>
</html>
Related
<form class="" ng-submit="submit()" ng-controller="MailingListController">
<input class="form-element large" placeholder="Email address" ng-model="emailaddress">
<input class="form-submit button large bkg-charcoal bkg-hover-pink color-white color-hover-white" type="submit" id="submit" value="Submit">
</form>
<script>
angular.module('ComingSoon', [])
.controller('MailingListController', ['$scope', function($scope) {
console.log("Working");
$scope.submit = function() {
console.log($scope.emailaddress);
};
}]);
</script>
I have tried to submit this form and the logs is showing there is nothing inside $scope.emailaddress. I have followed the documentation from angular website but it still doesn't work. Where isit that i am doing it wrongly?
Controller Binding to the view May gone wrong . you can take a look
here in the following plnkr
html :-
<!DOCTYPE html>
<html ng-app="ComingSoon">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MailingListController">
<form class="" ng-submit="submit()">
<input class="form-element large" placeholder="Email address" ng-model="emailaddress">
<input class="form-submit button large bkg-charcoal bkg-hover-pink color-white color-hover-white" type="submit" id="submit" value="Submit">
</form>
</body>
</html>
controller :-
angular.module('ComingSoon', [])
.controller('MailingListController', ['$scope', function($scope) {
console.log("Working");
$scope.submit = function() {
console.log($scope.emailaddress);
};
}]);
Check you console while doing !!
https://plnkr.co/edit/B7aJhGKhXin1tsldljpz?p=preview
hi it is working for me
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script>
angular.module('ComingSoon', [])
.controller('MailingListController', ['$scope', function ($scope) {
console.log("Working");
$scope.submit = function () {
console.log($scope.emailaddress);
};
}]);
</script>
</head>
<body ng-app="ComingSoon">
<form class="" ng-submit="submit()" ng-controller="MailingListController">
<input class="form-element large" placeholder="Email address" ng-model="emailaddress">
<input class="form-submit button large bkg-charcoal bkg-hover-pink color-white color-hover-white" type="submit" id="submit" value="Submit">
</form>
</body>
</html>
I am having an angular Js program like below.
HTML
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="mine"/> Mine
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="Other"/> Other
<textarea data-ng-disabled="test==='mine'" data-ng-model="htmlSpace" type="text"></textarea>
JS
var app = angular.module("Mydirective",[]);
app.controller("MyController",function($scope){
$scope.test = "mine";
});
The text area is getting disabled only when I select the radio button with value mine.I am expecting it to be disabled when the page loads only, cause I mentioned the value as mine in the controller. But its always enabled, Please help me with the issue
It works for me, please check below sample and check your angular version as well
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example88-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="Mydirective">
<script>
var app = angular.module("Mydirective",[]);
app.controller("MyController",function($scope){
$scope.test = "mine";
});
</script>
<div ng-controller="MyController">
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="mine"/> Mine
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="Other"/> Other
<textarea data-ng-disabled="test==='mine'" data-ng-model="htmlSpace" type="text"></textarea>
</div>
</body>
</html>
http://plnkr.co/edit/gBN41mrNfDXbEDLZchCp?p=preview
I have some inputs (text, checkboxes, selects).
I want to update controller model only after button press.
<input type="email" ng-model="vm.email" ng-model-options="{updateOn:'not blur, maybe custom event'} }"/>
<button ng-click="vm.apply()">Apply</button>
vm.apply = function() {
//How to fire event to trigger model update?
}
Ok, i guess i find solution. We can use a submit event.
So only when user will press submit button, model will update values.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example79-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="submitExample">
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
if ($scope.text) {
$scope.list.push(this.text);
}
};
}]);
</script>
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" ng-model-options="{ updateOn: 'submit' }" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
<pre>text={{text}}</pre>
</form>
</body>
</html>
I have one text box. When I type something in that text box and click anywhere then the content in the text box want to push in JSON.
Here is my text box code
<input type="text" name="treatmentCost" class="form-control" ng-model="addTemplate" />
Here is my JSON
$scope.existingTemp = [{"name": "template1"},{"name": "template2"},{"name": "template3"},{"name": "template4"},{"name": "template5"}];
Please share your ideas. Thanks in advance.
You can use ngBlur directive for that.
View:
<input type="text" ng-model="addTemplate" ng-blur="addValueToJson(addTemplate)"/>
Controller:
$scope.addValueToJson = function(value){
var newObj = {name: value};
$scope.existingTemp.push(newObj);
};
This is working JSFiddle for you.
Hope it helps.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.10/angular.js" data-semver="1.3.10"></script>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data=[];
$scope.fill=function(){
$scope.data.push("name:"+$scope.addTemplate);
console.log(JSON.parse(JSON.stringify($scope.data)));
}
});
</script>
</head>
<body ng-controller="MainCtrl">
<input type="text" name="treatmentCost" class="form-control" ng-model="addTemplate" ng-blur="fill()"/>
</body>
</html>
Plunker: http://plnkr.co/edit/rR0Sl0ZE7xTrZmIonVAI?p=preview
When I do
$(document).ready(function(){
$('form').live('submit', function(){
$('#template').tmpl([{ "id" : "555" }, { "in" : "checked" } ]).prependTo('#content');
});
});
with and with HTML
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text-x-jquery/template" id="template">
<form action="" method="post">
"${id}" <div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" "${in}"/> </div>
</form>
</script>
</head>
<body>
<form action="" method="post">
<input value="Save" type="submit">
</form>
<br><br>
<div id="content"> </div>
then Error Console in Firefox says Syntax Error in line 1 of jquery.tmpl.min.js which is from JQuery.tmpl()
JSFiddle at
http://jsfiddle.net/Cu5Mj/4/
Is it
$('#template').tmpl([{ "id" : "555" }, { "in" : "checked" } ]).prependTo('#content');
that is wrong?
Update Updated JSFiddle and post with code that fails.
I changed the followings in your HTML:
<script type="text/x-jquery-tmpl" id="template">
<form action="" method="post">
"${Id}" <div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" ${In} /> </div>
</form>
</script>
and your JavaScript:
$(document).ready(function(){
$('form').live('submit', function(){
$('#template').tmpl({ "Id" : "555","In" : "checked" }).prependTo('#content');
return false;
});
});
and it works for me now.
The problems I think was the template variable names, I capitalized them, and the template data was an array of 2 objects instead of a simple object. (Also changed the template script MIME a bit.)