How can i set true or false when my certain data is selected in angularjs?
example i have data
$scope.obj = {
'id': 1,
'id': 2,
'id': 3
}
<div ng-repeat="myData in ctrl.obj">
<input type="text" class="form-control" placeholder="Notes" ng-model="ctrl.myData ">
</div>
i want some help when i input data and that is equal to id = 1 it will set my value that is ID 1 else it will set empty, but when i go back to my last selected input box it will still display the value of my input box that is previously inputted. thanks to assist on my logic error :)
Check the below code which may help you:
var abcAPP = angular.module("abcApp",[]);
abcAPP.controller("abcCtrl",function($scope){
$scope.obj = [{ 'id': 1}, {'id': 2}, {'id': 3 }]
$scope.myData = ["1","2","3"];
});
<!DOCTYPE html>
<html ng-app="abcApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-controller="abcCtrl">
<pre ng-bind="myData|json"></pre>
<div ng-repeat="myData1 in obj">
<input id="{{$index}}" type="text" class="form-control" placeholder="Notes" ng-model="myData[$index]">
</div>
</div>
</body>
</html>
Related
I am presenting a simple yes/no answer question to my users and I want to have a default radio button selected. The problem is that I could have any number of these questions presented to the user.
This is my code:
<div ng-form ng-repeat="i in offers track by $index" name="messageForm[$index]">
<div data-ng-repeat="option in closeListingOptions" class="radio">
<label>
<input type="radio" name="close" ng-model="i.close" value="{{option.id}}" ng-checked="option.checked" />{{option.name}}</strong>
</label>
</div>
</div>
My options are set as follows:
$scope.closeListingOptions = [
{
id: "1",
name: "Yes please",
checked: true
},
{
id: "0",
name: "No thanks",
checked: false
}
];
The above example works and check/sets "yes" as the default answer. However unless I manually select an option via a mouse click the value is not binding to the model.
I have read that ng-select should not be used with ng-options but i am not sure how else I can achieve this goal? It seems that I need something like:
i.close = "1":
But how can I set this for an unknown quntity since I don't know how many question will be presented?
1- Instead of value={{something}} you can use ng-value directive.
2- Each input pack should have its specific name.
Here is a working example:
var app = angular.module("app", []);
app.controller("MainCtrl", function($scope) {
$scope.offers = [{
number: 1
},
{
number: 2
}
];
$scope.closeListingOptions = [{
id: "1",
name: "Yes please",
checked: true
},
{
id: "0",
name: "No thanks",
checked: false
}
];
});
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-form ng-repeat="i in offers" name="messageForm[$index]">
<div data-ng-repeat="option in closeListingOptions" class="radio">
<label>
<input type="radio" name="close-{{i.number}}" ng-model="i.close" ng-value="option.id" ng-checked="option.checked" />{{option.name}}</strong>
</label>
</div>
{{i}}
<hr>
</div>
</body>
</html>
You should try this:
<input type="radio" name="close"
ng-model="option.checked" value="{{option.id}}"
ng-checked="option.checked" />{{option.name}}</strong>
This ng-model will updated the checked key of your data array and then you can fetch all the radio button selection as per their ids from that single variable.
Hope this helps.
I was able t achieve my goal with the following:
<div data-ng-repeat="option in closeListingOptions" class="radio" ng-init="i.closeListing = 1">
<label>
<input type="radio" name="close-{{i.id}}" ng-model="i.closeListing" ng-value="{{option.id}}" />
<strong>{{option.name}}</strong>
</label>
</div>
The solution was to use ng-init
I am fetching some records which are already assigned to users with checked checkboxes. I want to assign some additional ones that are coming as unchecked checkboxes. How can I show checked checkboxes first and then show whatever is unchecked after them?
You can use angular filters to show checked checkboxes first and whatever is unchecked, show it after them
try this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = [
{id: 1, value: 1},
{id: 2, value: 0},
{id: 3, value: 1},
{id: 4, value: 0},
{id: 5, value: 0}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<h2>Checked</h2>
<div ng-repeat="item in data | filter : { value : 1}">
{{item.id}} : <input type="checkbox" ng-checked="item.value=='1'"/>
</div>
<h2>Unchecked</h2>
<div ng-repeat="item in data | filter : { value : 0}">
{{item.id}} : <input type="checkbox" ng-checked="item.value=='1'"/>
</div>
</div>
</div>
Hope it helps..
I want to display one dynamic table, But table columns I want to select at run time. For that purpose I have taken two multi select box, in first Multi select am loading all column names using Json.
Now my requirement is, I want add selected column names from first multi select box to second multi select box. And if required I also want to remove from second multi select box.
I have taken two buttons, one for adding and other for removing.
Can any one help me with this requirement. How can I do it using AngularJs?
please refer attached image to clear with my requirement.
Thank in advance..
angular.module('app', []).controller('MoveCtrl', function($scope) {
$scope.available = [];
$scope.selected = [];
$scope.moveItem = function(items, from, to) {
angular.forEach(items, function(item) {
var idx = from.indexOf(item);
from.splice(idx, 1);
to.push(item);
});
// clear selection
$scope.available = "";
$scope.selected = "";
};
$scope.moveAll = function(from, to) {
angular.forEach(from, function(item) {
to.push(item);
});
from.length = 0;
};
$scope.selectedclients = [];
$scope.availableclients = [{
id: 1,
name: 'Bob'
}, {
id: 2,
name: 'Sarah'
}, {
id: 3,
name: 'Wayne'
}, {
id: 4,
name: 'Pam'
}];
});
input {
display: block;
margin: 0 auto;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.2.17" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="MoveCtrl">
<h1>Move items between Select boxes</h1>
<div style="float:left">
<div>Available Clients</div>
<div>
<select size="5" multiple ng-model="available" ng-options="client as client.name for client in availableclients" style="width: 100px;height:100px"></select>
</div>
</div>
<div style="float:left; width: 100px; text-align:center">
<div> </div>
<input id="moveright" type="button" value=">" ng-click="moveItem(available, availableclients,selectedclients)" />
<input id="moverightall" type="button" value=">>" ng-click="moveAll(availableclients,selectedclients)" />
<input id="move left" type="button" value="<" ng-click="moveItem(selected, selectedclients,availableclients)" />
<input id="moveleftall" type="button" value="<<" ng-click="moveAll(selectedclients,availableclients)" />
</div>
<div style="float:left">
<div>Selected Clients</div>
<div>
<select size="5" multiple ng-model="selected" ng-options="client as client.name for client in selectedclients" style="width: 100px;height:100px"></select>
</div>
</div>
<div style="clear:both">
<br/>
<div>Selected Clients: {{selectedclients}}</div>
<div>Available Clients: {{availableclients}}</div>
<div>Selected: {{selected}}</div>
<div>Available: {{available}}</div>
</div>
</body>
</html>
Credit goes to AngularJS moving items between two select list for the base. However, it would only move single items when multiple items are selected.
I'm very much new to angularjs so I'm facing this issue where i have a nested json, and i am using the parent value as a header and the values of the child as checkboxes. Now, when I want to retrieve the value of those checkboxes which have been ticked, i want it in the format of {parent_name:child_name} stored in an array.
I'm using the following sample data taken from this thread.
Data:
parents : [{
name: 'George',
age: 44,
children: [{
name: 'Jack',
age: 16,
isChecked: 'true'
},{
name: 'Amy',
age: 13,
isChecked: 'false'
}]
}, {
name: 'Jimmy',
age: 38,
children: [{
name: 'Max',
age: 7,
isChecked: 'false'
},{
name: 'Lily',
age: 5,
isChecked: 'false'
},{
name: 'Kim',
age: 4,
isChecked: 'true'
}]
}]
And, my current output
looks like this
My HTML code is
<div class="col-md-12 col-xs-12" ng-repeat="parent in parents ">
<div class="form-group">
<label>{{parent.name}}</label>
<div class="input-group" ng-repeat="child in parent.children">
<label><input type="checkbox" ng-checked="child.isChecked=='true'"> {{child.name}}</label>
</div>
<hr>
</div>
Now, in reference to the image, I want to have {George:Jack} and {Jimmy:Kim} in an array, but i can't find a way to achieve that.
EDIT : I forgot to mention another important point, some checkboxes will be pre-selected. As per the data, checkbox for Jack and Kim will already be ticked on-load. I have to fetch the value for the pre-selected values as well as any newly checked checkboxes.
My Plunker code is here.
I hope my question is clear. Thanks in advance!
The proposed solution modifies your original JSON object.
If for some reasons, you have to keep the original JSON object, you should do a copy of it and store it in the controller scope (Angular has functions to do it).
The idea is to add a isChecked attribute in the original JSON object which will be values to false by default and that will be set to true when the checkbox is selected or false when the checkbox is unselected.
That is possible by using the ng-model directive which binds here a html input to a variable in JS side.
Here is the plunker :
http://plnkr.co/edit/EzDp3mMtlnH3t4bIz8e6?p=preview with Angular js 1.5.
js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.parents = [{
name: 'George',
age: 44,
children: [{
name: 'Jack',
age: 16,
isChecked: true;
},{
name: 'Amy',
age: 13
}]
}, {
name: 'Jimmy',
age: 38,
children: [{
name: 'Max',
age: 7
},{
name: 'Lily',
age: 5
},{
name: 'Kim',
age: 4,
isChecked: true;
}]
}]
$scope.submit= function(){
var results = [];
for (var i=0; i< $scope.parents.length; i++){
var parent = $scope.parents[i];
for (var j=0; j< parent.children.length; j++){
var child = parent.children[j];
if (child.isChecked){
results.push(parent.name +":"+ child.name);
}
}
}
//display info
for ( i=0; i< results.length; i++){
console.log(results[i]) ;
}
}
});
html
<!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.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div class="col-md-12 col-xs-12" ng-repeat="parent in parents ">
<div class="form-group">
<label>{{parent.name}}</label>
<div class="input-group" ng-repeat="child in parent.children">
<label><input type="checkbox" ng-checked="child.isChecked=='true'" ng-model="child.isChecked">
{{child.name}}</label>
</div>
<hr>
</div>
</div>
<button type="button" ng-click="submit()" class="btn btn-success width-80px">Submit</button>
</body>
</html>
Using the ngChecked directive, you can only mark the checkbox as checked if the expression (here child.checked=='true') is truthy. However, it doesn't affect the value of your variable child.checked.
I recommand you to use instead the ngModel directive which will bind the value of your checkbox with child.checked (or any other variable).
<div class="col-md-12 col-xs-12" ng-repeat="parent in parents ">
<div class="form-group">
<label>{{parent.name}}</label>
<div class="input-group" ng-repeat="child in parent.children">
<label>
<input type="checkbox" ng-model="child.checked">{{child.name}}
</label>
</div>
<hr>
</div>
Since child.checked is not defined at the begining, it will be falsy so the checkbox won't be checked. You can change this behaviour by setting it to true.
Then, to create an array of your results, you can do something like this:
var results = [];
parents.forEach(function (parent) {
parent.children.forEach(function (child) {
if (child.checked) {
var couple = {};
couple[parent.name] = child.name;
results.push(couple);
}
});
});
I am pretty new to angular and from documentation on official site and using plunkr I was able to figure out we use ng-repeat and push method to add something new to DOM if I am not wrong.
I am trying to go through this example found on docs:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ngController-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<!--<script src="app.js"></script>-->
<script>
angular.module('controllerAsExample', [])
.controller('SettingsController1', SettingsController1);
function SettingsController1() {
this.name = "John Smith";
this.contacts = [
{type: 'phone', value: '408 555 1212'},
{type: 'email', value: 'john.smith#example.org'}
];
}
SettingsController1.prototype.greet = function () {
alert(this.name);
};
SettingsController1.prototype.addContact = function () {
this.contacts.push({ value: ''});
};
SettingsController1.prototype.removeContact = function (contactToRemove) {
var index = this.contacts.indexOf(contactToRemove);
this.contacts.splice(index, 1);
};
SettingsController1.prototype.clearContact = function (contact) {
contact.type = 'phone';
contact.value = '';
};
</script>
</head>
<body ng-app="controllerAsExample">
<div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
<label>Name: <input type="text" ng-model="settings.name"/></label>
<button ng-click="settings.greet()">greet</button><br/>
Contact:
<ul>
<li ng-repeat="contact in settings.contacts">
<select ng-model="contact.type" aria-label="Contact method" id="select_{{$index}}">
<option>phone</option>
<option>email</option>
</select>
<input type="text" ng-model="contact.value" aria-labelledby="select_{{$index}}" />
<button ng-click="settings.clearContact(contact)">clear</button>
<button ng-click="settings.removeContact(contact)" aria-label="Remove">X</button>
</li>
<li><button ng-click="settings.addContact()">add</button></li>
</ul>
</div>
</body>
</html>
This is kind basic overview I understood, but I am not able to figure out how ng-repeat is helping us to add a new element(push a new element). As far as I can see its acting like a iterator in java.
To do it the Angular way, you could have an array of text field meta values, e.g.
formFieldArr = [{fieldName: 'name', minLength: '2' ... } , {fieldName: 'gender', minLength: '4' ... }]
Have an ng-repeat to loop over and render the text fields.
In HTML
<div ng-repeat="formFieldArr">
<input name="formField.name" ng-minlength="formField.minLength">
</div>
In your submit codes, all you need is to add to the array and the form fields will be rendered.
FormFieldPost.save(){
onsuccess:
formFieldArr.push("{fieldName: 'gender', minLength: '4' ... }");
}
If you are thinking in terms of DOM, that will be more of a jQuery solution.
Expanding further, you could also use the same array to render different kinds of form fields.
formFieldArr = [{fieldName: 'name', minLength: '2', fieldType: 'select' ... } , {fieldName: 'gender', minLength: '4', fieldTypre: 'text' ... }]
In HTML
<div ng-repeat="formFieldArr">
<input name="formField.name" ng-minlength="formField.minLength" ng-show="formField.fieldType === 'text'">
... Do similar ng-show for select.
</div>
(Typing on mobile)