I have number of check boxes in my single page
<div class="check-outer">
<label>Place of operation</label>
<div class="checkDiv">
<div ng-repeat="place in places">
<div class="checkbox-wrapper">
<label>
<input type="checkbox" ng-model="placesOBJ[place.place_id]">
<span></span>
</label>
</div>
<label class="chk-lbl">{{place.place_name}}</label>
</div>
</div>
</div>
This is working perfectly. If data is present then i want to defaultly check this check boxes
if($scope.client.client_places){
var plcLength = $scope.client.client_places.length;
var client_places = new Array();
for(var i = 0; i < plcLength; i++){
client_places[i] = $scope.client.client_places[i]['place_id'];
}
// console.log(client_places);
//$scope.placesOBJ4 = client_places;
$scope.placesOBJ = client_places;
}
client places contain an array like {1, 2}
But this is not working. if any one know about this please help me.
You can use a directive ng-checked and pass in an expression based on the model
You can use ng-checkedto achieve what you need
<input type="checkbox" ng-model="placesOBJ[place.place_id]" ng-checked="placesOBJ">
If $scope.placesOBJ is populated (not null) then the expression is true and the checkbox will be selected
Just have a look at this simple code It will be useful for you
<body ng-app="myApp" ng-controller="HomeCtrl" ng-init="init()">
<div>
<label>Place of operation</label>
<div ng-repeat="place in places" ng-show="check">
<input type="checkbox" ng-model="placesOBJ[place.id]" ng-checked="true">
<label class="chk-lbl">{{place.name}}</label>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app=angular.module('myApp', []);
app.controller('HomeCtrl', ['$scope', function($scope) {
$scope.check=false;
$scope.places=[{'id':1, 'name':'place1'},{'id':2, 'name':'place2'},{'id':3, 'name':'place3'},{'id':4, 'name':'place4'}];
$scope.init=function()
{
if($scope.places)
{
$scope.check=true;
}
}
}]);
</script>
</body>
Explanation:- You can make use of ng-init="init()" to call on page load , it will check if data is present or not. If present then set ng-show="true" else by default it will be false
Related
I am dynamically creating divs, while clicking a button which contains some radio inputs. In the controller I have an array for the divs population which initially has a length of 1.
'use strict';
angular.module('load').controller(
'commodityController',
function($scope, $http, $state, $stateParams) {
$scope.parentload = $scope.$parent.load;
$scope.addMoreCommodities = function() {
$scope.parentload.loadCommodities.push({
'isHazmat' : false,
'dimension' : 'IN'
});
}
$scope.parentload.loadCommodities = []; // emtry array
$scope.addMoreCommodities(); // Here initialize the array
$scope.changeHazmat = function(booleans, val) {
console.log("booleans " + booleans);
console.log("isactive " + val);
$scope.parentload.loadCommodities[val].isHazmat = booleans;
};
});
Using following html, while loading the page div populated well,
<div class="form-right-card disabledInput" ng-init="showname==true" id="commodityContent">
<form name="commodityAttForm">
<div ng-repeat="loadCommodities in load.loadCommodities">
<div class="form-group33"> {{$index}} // here value prints correctly
<label class="form-label">Hazmat</label>
<input type="radio" class="form-btn-inactive" ng-click="changeHazmat('true',$index)" id="yes" name="hazmat" />
<label class="plsLabel" for="yes">Yes</label>
<input type="radio" class="form-btn-inactive" ng-click="changeHazmat('false',$index)" id="no" name="hazmat" />
<label class="plsLabel" for="no">No</label>
</div>
</div>
</form>
</div>
<button class="form-btn-link" ng-click="addMoreCommodities()">+ Add Commodity</button>
I am able to generate the div with all the inputs when clicking on the button. Problem is, I am sending the $index to controller on ng-click of the radio buttons, while clicking on the radio buttons, I am calling the function changeHazmat('true',$index) here the index is always 0, even when I have an array with a length greater than 1.
$scope.changeHazmat = function(selected, val) {
console.log("val" + val);
$scope.parentload.loadCommodities[val].isHazmat = selected;
Log is always printing the index as 0.
Can someone help me here, what am I doing wrong?
You are correctly passing the $index the controller and the code should work.
However I would recommend to use ngModel with ngValue directive.
<input type="radio" ng-model="loadCommodities.isHazmat" ng-value=true name="hazmat" />
(function(angular) {
'use strict';
angular.module('myApp', [])
.controller('Controller', ['$scope', function($scope, ) {
$scope.parentload = {
loadCommodities: []
};
$scope.addMoreCommodities = function() {
$scope.parentload.loadCommodities.push({
'isHazmat': false,
'dimension': 'IN'
});
}
$scope.addMoreCommodities();
$scope.changeHazmat = function(booleans, val) {
$scope.parentload.loadCommodities[val].isHazmat = booleans;
};
}]);
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Controller">
<div ng-repeat="loadCommodities in parentload.loadCommodities">
<div class="form-group33">
<label class="form-label">Hazmat</label>
<input type="radio" ng-model="loadCommodities.isHazmat" ng-value=true name="hazmat" />
<label class="plsLabel" for="yes">Yes</label>
<input type="radio" ng-model="loadCommodities.isHazmat" ng-value=false name="hazmat" />
<label class="plsLabel" for="no">No</label>
</div>
<p>{{parentload.loadCommodities}}</p>
</div>
</div>
</div>
I'm wondering if the problem is you're assigning the same "id" ('yes' and 'no') to multiple divs (ie inside the loop). It might be the reason the $index isn't working for you. If you remove the id's for the time being and re-try, I'm thinking the problem goes away.
I have a form with angular, but when I try to call $scope.myForm.$setSubmitted() it crashes. What am I doing wrong?
I get this error:
$scope.myForm.$setSubmitted is not a function
It should be possible, based on the docs.
$setSubmitted();
Sets the form to its submitted state.
I also seem to have some problem with $touched in the line:
ng-if="myForm.myValue.$error.min && (myForm.myValue.$touched || myForm.$submitted)"
So, two questions,
Why can't I call $setSubmitted()?
Why can I not get the $touched flag from the input?
angular.module('myApp', []).controller('myController', ['$scope', function($scope){
var vm = this;
vm.submitTheForm = function(){
$scope.myForm.$setSubmitted();
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController as ctrl">
<form name="myForm" ng-submit="ctrl.submitTheForm()" >
<input type="submit" value="submit" text="foo">
<input type="number" class="" name="myValue" max="10" ng-model="foo" max="10" min="0" number="{}" placeholder="enter a number" />
<div ng-if="myForm.myValue.$error.min && (myForm.myValue.$touched || myForm.$submitted)">Must be a positive number. This should be seen if input is touched or the form is submitted.</div>
<div ng-if="myForm.myValue.$error.max && (myForm.myValue.$touched || myForm.$submitted)">Cannot be larger than 10. This should be seen if input is touched or the form is submitted.</div>
<br/>
<br/>
<tt>myForm.myValue.$valid = {{myForm.myValue.$valid}}</tt><br/>
<tt>myForm.myValue.$touched = {{myForm.myValue.$touched}}</tt><br/>
<tt>myForm.myValue.$error.min = {{myForm.myValue.$error.min}}</tt><br/>
<tt>myForm.myValue.$error = {{myForm.myValue.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$submitted = {{myForm.$submitted}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</div>
</div>
You are using AngularJS v1.2.23 which does not support $setSubmitted() AngularJS v1.2.3, it's only supported after v1.3.0
$scope.myForm.$setSubmitted is not a function!
This solution may not be very specific to this question but generally we get this error when we try to assign setSubmitted to an object instead of a function.
$scope.myForm.$setSubmitted = function(){} will solve the problem.
How to convert AngularJS scope object into simple JS array?
This function checks if any checkbox is checked and adds corresponding value to an object.
Now I want to transfer the object values to an array and alert it after press the button. But the result is undefined, why?
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
// we will store our form data in this object
$scope.formData = {};
});
var array = Object.keys(formData).map(function(k) { return obj[k] });
function test(){
alert(array);
}
<-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<!-- load up bootstrap and add some spacing -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
body { padding-top:50px; }
form { margin-bottom:50px; }
</style>
<!-- JS -->
<!-- load up angular and our custom script -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<h2>Angular Checkboxes </h2>
...
<!-- MULTIPLE CHECKBOXES -->
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red"> Red
</label><br>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
</label> <br>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
</label>
</div>
...
<!-- SHOW OFF OUR FORMDATA OBJECT -->
<h2>formData_object_is_not_empty-test</h2>
<pre>
{{formData}}
</pre>
<button onclick="test()">Click me</button>
</div>
</body>
</html>
Try this:
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
// we will store our form data in this object
$scope.formData = {};
var array = Object.keys($scope.formData).map(function(k) { return obj[k] });
// wait for the formData to change and then alert
setTimeout(function() {
alert(array);
}, 2000);
});
Angular is made in a way that you are not allowed to access the scope variables outside the controller.
If you want to have the array as debug information, use a browser plugin like AngularJS Batarang or use console.log(array) instead of alert(array) or try to save array in a global variable with document.array = array, so you can access it in the browser console.
I am creating a html / angularjs form. In the form i have a radio button with yes or no. So i want to check by default the button No.
This is the code i use :
My controller :
angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myvariable = 'false';
}]);
My html code snippet:
<div class="col-lg-10">
<input type="radio" id="variable" name="variable" ng-model="myvariable" value="true">Yes</input>
<input type="radio" id="variable" name="variable" ng-model="myvariable" value="false">No</input>
</div>
But nothing is selected(checked) when i load the form the first time. I have to click to one value to have one selected (checked)
What's wrong with my code ? Here the plunker link
Thanks
I've made a fiddle for you. Check HERE
You should also set ng-value which should be true or false
<div ng-controller="MyCtrl">
<div ng-repeat="o in options">
<input type="radio" name="group1" ng-model="o.checked" ng-value="o.checked"></input>
<label>{{o.name}}</label>
</div>
</div>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.options = [
{ name: 'OPT1', id: 1, checked: false },
{ name: 'OPT2',id: 2, checked: false },
{ name: 'OPT3',id: 3, checked: true }
];
}
The reason why it does not work in your plunkr is because you create a module named "radioExample" but you don't use it when you write the HTML code.
Basically, replace this -
<html ng-app>
at the beginning of the code with this
<html ng-app="radioExample">
This way, when you declare the controller, AngularJS knows which module it needs to look into to get the controller.
Note - if you had not associated your controller with a module, then your code would work.
Check out ng-checked. What you have to do is to add ng-app="radioExample" to the html-Tag of your Application.
Then add ng-checked="myvariable == 'false'" and ng-value="'value'" like in the following plunker example:
Plunker
<div class="col-lg-10">
<input ng-checked="myvariable == 'true'" type="radio" id="variable" name="variable" ng-model="myvariable" value="true">Yes
<input ng-checked="myvariable == 'false'" type="radio" id="variable" name="variable" ng-model="myvariable" value="false">No
</div>
Error in data binding. Define myvariable in controller override value in radiobutton. You must use ng-repeat like
<div ng-repeat="o in options">
<input type="radio" name="name" ng-model="o.checked" ng-value="o.checked"></input>
<label>{{o.name}}</label>
</div>
(I use code from previous answer)
I need to duplicate some input fields in order to handle data from clients. I have done it with jQuery http://jsfiddle.net/m7R3f/1/
HTML:
<fieldset id="fields-list">
<div class="pure-g entry">
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input-1" name="input-1">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="date" name="date">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input-2" name="input-2">
</div>
</fieldset>
<button id="add">Add</button>
JS
$(document).ready(function ()
{
$("#add").click(function ()
{
$(".entry:first").clone(false).appendTo("#fields-list");
});
});
However I just start learning Angular and want to convert these code to Angular.
I have read questions in stackoverflow and found the code with angularjs here: http://jsfiddle.net/roychoo/ADukg/1042/. However, it seem works only for ONE input field? Can I clone/duplicate several input fields using AngularJS? (in other word: convert my code above into AngularJS version?)
Thank you very much.
If you want to clone html element, the best way to use ng-repeat directive.
Your Controller
var App = angular.module('App', []).controller('Test', ['$scope',
function($scope) {
$scope.inputCounter = 0;
$scope.inputs = [{
id: 'input'
}];
$scope.add = function() {
$scope.inputTemplate = {
id: 'input-' + $scope.inputCounter,
name: ''
};
$scope.inputCounter += 1;
$scope.inputs.push($scope.inputTemplate);
};
}
])
<!DOCTYPE html>
<html ng-app="App">
<head lang="en">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="Test">
<fieldset id="fields-list">
<div class="pure-g entry" ng-repeat="input in inputs track by input['id']">
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input" name="input-1">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="date" name="date">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input-2" name="input-2">
</div>
</div>
</fieldset>
<button type="button" id="add" ng-click="add()">Add</button>
</body>
</html>
Angular prevents of creation duplicated elements, to avoid this, use track by like in the example
You should create an array and use ng-repeat in your HTML. Each object in the array can contain the data necessary to populate your divs. If you want to start with three entries, then add the data for those three. If you want to add more, then simply push onto the array. Because of Angular's 2-way data binding your form field will appear once the element is pushed onto the array.
For more details on how to do this, checkout the To Do example on Angular's home page.
How about this(Fiddle)
add two more ng-model and push those models
$scope.add = function(){
$scope.items.push($scope.newitem1,$scope.newitem2,$scope.newitem3);
}