I am trying to do it in proper way with less pain, but i can't figure out how to deal with ng-model and binding it to the selected list etc and moreover i need to populate that list in later time and keep selected objects in it.
categories = [ { "name": "Sport", "id": "50d5ad" } , {"name": "General", "id": "678ffr" } ]
<span ng-repeat="category in categories">
<label class="checkbox" for="{{category.id}}">
<input type="checkbox" value="{{category.id}}" ng-model="??" ng-click="??" name="group" id="{{category.id}}" />
{{category.name}}
</label>
</span>
I have to override the categories each time the list is populated since it will be pulled out from a server.
So I guess I need to have arrays and the second one will hold the selected objects?
If I am right, how do I preselect checkboxes?
Do I need ng-click in order call custom function to store the selected object in the other array?
Do I need ng-model in checkbox And what for?
What is the proper-way with less pain?
I have to override the categories each time the list is populated
since it will be pull out form server. So i quess i need to have
arrays and the second one will hold the selected objects?
Yes, since it is a list you can/should use arrays. The information about the selected items/objects should be stored on your scope model (example below).
If I am right, how do I preselected checkboxes?
Save the ID's of the selected options/checkboxes on your model and let the ng-model do the rest.
Do I need ng-click in order call custom function to store the selected
object in the other array?
No, you don't need it, ng-model is enough.
Do i need ng-model in check box? And what for?
Yes, you need it. The ng-model is responsible for storing the selected options on your model and for making the ('pre-')selection automatic.
jsfiddle http://jsfiddle.net/bmleite/PQvQ2/
Related
when user expand object detail he get data about this object. To be more specific it is array of objects. Each object of this array looks like:
{
id:"6c8b7b19-17e1-4d2b-b47b-ad2c3f2e967b",
name:"TERM-xx",
overchargeTolerance:2,
pricingMethod:"ALTERNATIVE_MIN",
ratioGlassToAccessory:2,
ratioReplaceToRepair:2,
validFrom:"2016-02-02T08:55:22",
validTo:"2016-09-02T08:55:22",
vatRate:2
}
As mentioned above its array of objects so I ng-repeat over it:
<div class="row admin-sub-form" ng-show="isToogled(node.id)" ng-repeat="term in glassTerms">
And then insert values to inputs. But because sometimes value is constance from backend I cant let user write there anything so I offer selectbox with ng-options as below
<select id="pricingMethod"
class="form-control"
ng-model="term.pricingMethod"
ng-options="o as o for o in pricingMethod"
>
</select>
What I want:
When user load page it should pick from selectbox correct value automaticly. Right now it just display selectbox with possiblity to pick any value but doesnt pick anything. I have to click and pick it manualy.
p.s. If I replace selectbox with simple input as:
<input ng-model="term.pricingMethod" id="pricingMethod" class="form-control"/>
Value in that input is correctly displayed, in this case ALTERNATIVE_MIN
Any idea?
$scope.term.pricingMethod = 1; //replace 1 with the value which u want to display by default
for example if you have this list
[
{"name":"option 1","id": 1},
{"name":"option 2","id": 2},
{"name":"option 3","id": 3}
];
and you want to load "option 2" on page load, then set the model with the value 2 like this
$scope.term.pricingMethod = 2;
I am trying to filter with few properties of a json output in Angular.js, here is my plunker link.
The actual problem is, if i am trying to filter by type 1, than it automatically color filter value is also get checked, i want both filters should be applied separately or combined.
I want this filter to be applied on a e-commerce site for selecting the brands, category, minimum and maximum price etc.
How should this filter function should be written in angular.
The problem is that you are using the same checked property and ng-model in both different types of checkboxs
ng-checked="person.checked" ng-model="person.checked"
Instead you should use two different models for example person.checked.type and person.checked.color, should be something like:
//in type checks
<input type="checkbox" ng-checked="person.checked.type" ng-model="person.checked.type"/> {{ person.type }}
//in color checks
<input type="checkbox" ng-checked="person.checked.color" ng-model="person.checked.color" {{ person.color }}
Update
Here is a working plunker
I'm having a hell of a time here, probably because I'm very new to Angular and I don't quite grok everything yet.
First the scenario, then hopefully some code:
I have a button that fetches a JSON object from an API call. It becomes $scope.collectors.
$http.post('get', $scope.formData).success(function(data) {
$scope.collectors = data.results;
...
Then I take that and make a big list of these items with checkboxes, so you can pick and choose which ones you want to work with. When you've selected the ones you want, you click another button to collect all of these together and bulk operate on them.
So that's the overall story. They task I'm having trouble with is twofold. First, I'm simply trying to count the number of items that are checked. I've done it like this:
JS:
$scope.selectedCollectors = {};
HTML:
<div ng-repeat="collector in collectors">
<input type="checkbox" name="collector-id"
value="{{collector.id}}"
ng-model="selectedCollectors[collector.id]">
</div>
<p>Debug: {{ selectedCollectors }}</p>
<p>There are {{ selectedCollectors.length }} items checked</p>
When I select items, the output of selectedCollectors is as expected:
{"8596784":true,"7458347":true}
But {{ selectedCollectors.length }} never increments or shows anything at all.
The second thing is basically what I'm trying to do is get the subset of the original JSON object to work with, based on the users selection. Other than looping through each item in $scope.collectors and comparing the ID to the IDs in selectedCollectors, is there a better more Angular-ish way to get this subset?
Something makes me feel like I should take this JSON object and turn it into a pure array, but maybe not...
Any advice or help is appreciated.
Here is my solution. http://jsfiddle.net/wittwerj/962wm/
First, I let angular add a "selected" property to the checked collector objects:
<div ng-repeat="collector in collectors">
<input type="checkbox" name="collector-id" value="{{collector.id}}"
ng-model="collector.selected" />
</div>
Then a second ng-repeat creates a filtered subset of selected collectors (see this question):
<div ng-repeat="collector in (selectedCollectors = (collectors | filter:{selected: true}))">
Note that the second ng-repeat is not generating any markup - just the selectedCollectors array, which can be accessed like a scope variable.
I am newbie to Angularjs. Here is my scenario.
I have an array of
numbers = ['1','2','3'];
And also have a
<select id="fileNumber" ng-model="files"></select>
How Can I add the values of array to the dropdown list fileNumber
I tried,
ng-options="numbers"
Can anyone say how to include array value to dropdown list.
Here's an example for working with select and adding values to array:
Update:
<select ng-model='selectedNumber' ng-options='number for number in numbers'></select>
<button ng-click="add()">add</button>
Live example: http://jsfiddle.net/choroshin/MTfRD/643/
Read and follow ng-select directive
So, What I'm trying to do is fairly simple with vanilla JS, but I'm using AngularJS and I would like to know how to do it the best way within the framework. I want to update the selected options in a multiple select box. I do not want to add or remove any of the options. Here is what my HTML looks like:
<select multiple>
<option value="1">Blue</option>
<option value="2">Green</option>
<option value="3">Yellow</option>
<option value="4">Red</option>
</select>
Using the following array, I'd like to programmatically select/deselect options from this list:
[{id:1, name:"Blue"},{id:4, name:"Red"}]
When I set this array in the scope, I want the select box to deselect anything that is not Blue or Red and select Blue and Red. The standard response that I've seen on the Google Groups is to use ng-repeat. However, I can't recreate the list every time because the list of selected values is incomplete. As far as I can tell, AngularJS has no mechanism for this, and I'm at a loss as to how I would do this without resorting to using jQuery.
ngModel is pretty awesome! If you specify the indexes as a model selectedValues
<select multiple ng-model="selectedValues">
built from your list (selected) in a $watch
$scope.$watch('selected', function(nowSelected){
// reset to nothing, could use `splice` to preserve non-angular references
$scope.selectedValues = [];
if( ! nowSelected ){
// sometimes selected is null or undefined
return;
}
// here's the magic
angular.forEach(nowSelected, function(val){
$scope.selectedValues.push( val.id.toString() );
});
});
ngModel will automatically select them for you.
Note that this data binding is one-way (selected to UI). If you're wanting to use the <select> UI to build your list, I'd suggest refactoring the data (or using another $watch but those can be expensive).
Yes, selectedValues needs to contain strings, not numbers. (At least it did for me :)
Full example at http://jsfiddle.net/JB3Un/