AngularJs how to call the value of a radio button? - angularjs

</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Glossy: </label>
<div class="checkbox">
<label><input type="checkbox" value="">Yes</label>
<label><input type="checkbox" value="">No</label>
</div><br>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
<script>
//document.getElementById("date").innerHTML = new Date();
var app = angular.module("myApp",[]);
app.controller("verify", function ($scope){
var verifydate = function(){
var name = $scope.ss;
if(ss.checked){
z = Date.parse(Date());
z = z + 86400000;
var mydate1 = new Date(z);
}
};
});
</script>
`How do you call the value of a radio button in angularJS and store it in a variable. I am trying to make this function in the controller so that i can print the delivery date in the span but I am not able to?

You can find all the necessary information in the documentation for input\[radio\]
Every input should have the same ng-model but with different value or ng-value
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.shirts = "A magnificient t-shirt with a unicorn on it !";//used with ng-value
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="radio" id="poster" name="optradio" ng-model="option" value="poster">Posters
<input type="radio" id="coffee" name="optradio" ng-model="option" value="coffee">Coffee mugs
<input type="radio" id="shirt" name="optradio" ng-model="option" ng-value="shirts">T-shirts
<p>You choosed : {{option}}</p>
</div>

Related

AngularJS: Some form fields not bound with viewmodel

I'm writing a form that binds inputs with a angularJS model. For some reason, only certain fields are bound to the model (vm.customer). For example, vm.last_name, and vm.email are bound. But vm.first_name and vm.gender are not bound from inputs to model.
/* AddCustomer.js */
(function (angular) {
'use strict';
angular.module('app', []);
function controller($scope) {
var vm = this;
vm.genders = ["Male", "Female", "Other"];
vm.customer = {
first_name: 'Susan',
last_name: 'BOyle',
email: 's.boyle#singwell.com',
ip_address: '192.168.1.120',
gender: vm.genders[1]
}
vm.addCustomer = function($scope) {
console.log("bout to add a user");
};
vm.$onInit = function() {
};
}
// dep. injecion
controller.$inject = ['$scope'];
angular
.module('app')
.controller('AddCustomer', controller);
})(window.angular);
This is the html file
/* add-customer-view.html */
<form ng-app="app" ng-controller="AddCustomer as vm">
<pre>
customer = {{ vm.customer | json }}
</pre>
<div class="form-row">
<div class="form-group col-md-6">
<label>First</label>
<input class="form-control" type="text" ng-model"vm.customer.first_name" ng-model-options="{ updateOn: 'blur' }">
</div>
<div class="form-group col-md-6">
<label>Last</label>
<input class="form-control" type="text" ng-model="vm.customer.last_name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="col-form-label">Email</label>
<input class="form-control" type="email" ng-model="vm.customer.email">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<div class="form-check form-check-inline" ng-repeat="gender in vm.genders">
<input type="radio" name="gender" ng-model"vm.customer.gender" value="vm.genders[{{$index}}]">
<label class="form-check-label">{{ gender }}</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="col-form-label">IP Address</label>
<input class="form-control" type="text" ng-model="vm.customer.ip_address">
</div>
</div>
<div class="form-row">
<button type="submit" class="btn btn-primary" ng-click="vm.addCustomer()">Add Customer</button>
</div>
Link to code segments: https://codepen.io/nmnduy/pen/ypvddZ. Any insight would be very helpful!
1) You miss = operator on both cases (first_name, gender)
2) You need to replace input's value as follows:
<input type="radio" name="gender" ng-model="vm.customer.gender" value="{{gender}}">

Hiding multiple <div> elements using ng-show/ng-hide (AngularJS)

Good day!
So I trying to make Single Page App, but I am stuck with trying to hide/show div elements using checkbox. Since I was unsure how to make module, to hide/show elements, I used google to search up some tutorial, and found this code:
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
//This will hide the DIV by default.
$scope.IsVisible = false;
$scope.ShowHide = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisible = $scope.IsVisible ? false : true;
}
});
Unfortunately, when I try to apply this module to my html code, I always get this error:
Error: [ng:areq] Argument 'MyController' is not a function, got undefined
Here is my html code:
<div ng-app="MyApp" ng-controller="MyController">
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="field-6">{{"NOTES_INSPECTOR"| translate}}</label>
<span class="desc"></span>
<div class="controls">
<textarea class="form-control" cols="5" id="field-6" ng-model="comment"></textarea>
</div>
</div>
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="manager">{{"PREPAYMENT"| translate}}</label>
<span class="input-group-addon">€</span>
<input type="text" class="form-control" ng-model="avans">
<span class="input-group-addon">.00</span>
</div>
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="manager">{{"THE_FINAL_PRICE"| translate}}</label>
<span class="input-group-addon">€</span>
<input type="text" class="form-control" ng-model="finalPrice">
<span class="input-group-addon">.00</span>
</div>
<div class="form-group">
{{"ORDER_IS_USER_ORDER"| translate}}
<label class="iswitch iswitch-md bg-info">
<input type="checkbox" ng-model="IsVisible">
<i></i>
</label> {{"ALLOWED"| translate}}
</div>
</div>
Idea behind this html code is, whenever user presses button which is 4th div in the code, elements should appear, else, be hidden. Unfortunately it doesn't work. Any ideas why?
DEMO
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
//This will hide the DIV by default.
$scope.IsVisible = false;
$scope.ShowHide = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisible = $scope.IsVisible ? false : true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="field-6">{{"NOTES_INSPECTOR"}}</label>
<span class="desc"></span>
<div class="controls">
<textarea class="form-control" cols="5" id="field-6" ng-model="comment"></textarea>
</div>
</div>
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="manager">{{"PREPAYMENT"}}</label>
<span class="input-group-addon">€</span>
<input type="text" class="form-control" ng-model="avans">
<span class="input-group-addon">.00</span>
</div>
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="manager">{{"THE_FINAL_PRICE"}}</label>
<span class="input-group-addon">€</span>
<input type="text" class="form-control" ng-model="finalPrice">
<span class="input-group-addon">.00</span>
</div>
<div class="form-group">
{{"ORDER_IS_USER_ORDER"}}
<label class="iswitch iswitch-md bg-info">
<input type="checkbox" ng-model="IsVisible">
<i></i>
</label> {{"ALLOWED"}}
</div>
</div>

AngularJs ng-repeat : how to bind the values from <input> which was inside the ng-repeat?

var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope){
//Adding New Check# and Check amount Text Boxes
$scope.texs = [{id: 'tex', value: 'tex1'}];
$scope.add = function() {
var newItemNo = $scope.texs.length+1;
$scope.texs.push({'id':'tex'+newItemNo});
};
//Removing Last Check# and Check amount Text Boxes
$scope.remove = function() {
var lastItem = $scope.texs.length-1;
$scope.texs.splice(lastItem);
};
});
<!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="myCtrl">
<div class="col-md-12">
<div class="col-md-6">
<div ng-repeat="tex in texs">
<div class="form-group">
<label>tex:</label>
<div class="col-md-5">
<input type="number" class="form-control" id="tex.id" ng-model="tex.id" maxlength="6"></input>
</div>
<button ng-show="$last"
ng-click="remove()">-</button>
</div>
</div>
<button type="button"
ng-click="add()">Add More</button>
</div>
</div>
<div class="col-md-6">
<label>{{tex.id}}</label>
</div>
</body>
</html>
Above i mentioned my code. here If i did not use the ng-repeat="tex in texs",the label tex and texNo is displaying the value once i entered the values in input. But If I did use the ng-repeat="tex in texs", the value is not displayed. I know the code is wrong,but what i want is If i click Add More and entered the values of the second tex and texNo, I want to display the both of values of tex and texNo in the Label.
please suggest me with something.
The tex.id contains a string tex whereas ng-model is expecting a number.
You can use dynamic keys and provide an initial value to it
Inside controller
$scope.texs = [{'id1': 1}];
$scope.add = function() {
var newItemNo = $scope.texs.length+1;
$scope.texs.push({['id'+newItemNo]:1});
};
Inside HTML
<div ng-repeat="tex in texs">
<div class="form-group">
<label>tex:</label>
<div class="col-md-5">
<input type="number" class="form-control" id="{{'id'+($index+1)}}" ng-model="tex['id'+($index+1)]" maxlength="6" />
</div>
<button ng-show="$last"
ng-click="remove()">-</button>
</div>
</div>
<button type="button"
ng-click="add()">Add More</button>
</div>
FIDDLE
So, you need to use:
$scope.texs = [{id: 'tex', value: 'tex1'}];
And in HTML:
<div class="form-group"">
<label>tex:</label>
<div class="col-md-5">
<input type="number" class="form-control" id="{{tex.id}}" ng-model="tex.id" maxlength="6"></input>
</div>
<button ng-show="$last"
ng-click="remove()">-</button>
</div>
<div class="form-group">
<label>tex No:</label>
<div col-md-5">
<input type="number" class="form-control" id="{{tex.value}}" ng-model="tex.value" maxlength="9"></input>
</div>
</div>
</div>

Angular expression doesn't work with ng-disabled

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<body ng-app="myApp">
<div ng-controller="toDoCtrl">
<div>
<hr>
<form class="form" name="commentForm" ng-submit="vm.submitCommentForm()">
<div class="form-group">
<label for="fieldBody">Comment:</label>
<textarea name="body" id="fieldBody" class="form-control" rows="3"
ng-change="vm.changeCommentForm()"
ng-model="vm.commentForm.body"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" ng-disabled="!vm.validCommentForm">Comment</button>
</div>
</form>
<hr>
</div>
</div>
Script
var app = angular.module('myApp', []);
app.controller('toDoCtrl', function () {
var vm = this;
vm.validCommentForm = true;
})
The "comment" button appears disabled when vm.validCommentForm = true
Meanwhile if I hardcode ng-disabled=0comment button appears working, as supposed. What did I get wrong?
You are using controllerAs methodology but not setting the alias in view
Try changing
<div ng-controller="toDoCtrl">
To
<div ng-controller="toDoCtrl as vm">

Angularjs show only clicked event field instead of showing multiple ng-show values on each click

I want to show only clicked event field, but it was showing multiple views on each click event.
'use strict';
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope){
$scope.fieldCollectionSingle = [];
$scope.selectSingle = function (fieldkey, field) {
$scope.showSingle_Fieldsettings = true;
};
$scope.showSingle = function (fieldkey, field, index) {
return angular.equals(shownSingle, field, index);
};
$scope.removeName = function (fieldkey) {
$scope.fieldCollectionSingle.splice(fieldkey, 1);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="AppCtrl">
<button class="form-control" ng-click="fieldCollectionSingle.push([])">Single Line Text</button><br/>
<fieldset ng-click="selectSingle()" class="ui-state-default" ng-repeat="(fieldkey, field) in
fieldCollectionSingle">
<label>{{field.single}}</label>
<input type="text" id = "abc{{fieldkey}}" class="form-control" placeholder="Enter name">
<button class="remove" ng-click="removeName($fieldkey)">-</button>
</fieldset>
<div ng-repeat="(fieldkey, field) in fieldCollectionSingle" class="form-group" ng-show="showSingle_Fieldsettings">
<label>Field Label(?)</label><br/>
<fieldset>
<input ng-model="field.single" ng-click="setLabel(fieldkey)" class="fieldLabel">
</fieldset>
</div>
</div>
</div>
[1]: http://jsfiddle.net/vijjusena/17cc74g0/2/ [this is mycode jsfiddle]
At-last I understood your requirement and edited you JSFiddle to create exactly what you wanted. I have changed few things, but I hope you can understand all of them. If something gets you stuck, ask me.
Important: You will have to click on "Default title" text to show the other form to change/update the title.
Here is the JSFiddle. Good luck, have fun!
<div ng-app="myApp">
<div ng-controller="AppCtrl">
<button class="form-control" ng-click="addNewField()">Single Line Text</button>
<fieldset class="ui-state-default" ng-repeat="(fieldkey, field) in fieldCollectionSingle">
<label ng-click="selectSingle(field)">{{ field.label }} : </label>
<input type="text" ng-model="field.value" class="form-control" placeholder="Enter name">
<button class="remove" ng-click="removeName($fieldkey)">-</button>
</fieldset>
<div class="form-group" ng-show="showSingle_Fieldsettings">
<label>Field Label(?)</label>
<fieldset>
<input ng-model="selectedField.label" class="fieldLabel">
</fieldset>
</div>
</div>
</div>

Resources