This question already has answers here:
How do I set the value property in AngularJS' ng-options?
(27 answers)
Closed 3 years ago.
I'm having an issue getting just the value from a dropdown. I have the following structure:
$scope.categories = [
{id: 7, title: 'Peanut Butter'},
{id: 4, title: 'Mustard'},
{id: 3, title: 'Jelly'},
{id: 2, title: 'Jam'},
{id: 1, title: 'Mint Jelly'}
];
and I'm creating a dropdown as follows:
<select class="form-control" ng-model="testme.id" ng-options="c as c.title for c in categories track by c.id">
<option value="">------</option>
</select>
<input type="text" ng-model="testme.pos" />
The dropdown generates fine
For example, if I put in "3" into "testme.pos" and select "Jam", but the model "testme" comes with the following example result:
{id: {id: 2, title: 'Jam'}, pos: 3 },
What I would like to see:
{id: 2, pos: 3}
Any help would be great. I created a plnkr: Select Help
Instead of ng-model="testme.id" use ng-model="testme"
Related
currently I have the problem to not be able to display some data in a dropdown. I want to create two different components in which the dropdowns could be. In one of them the dropdown is displayed properly, in the other I'm not able to make it running.
Here a small code snippet - I hope this is enough.
Working example:
component.html
<select class="test-table__input-filter table__input-filter" [formControl]="filter.control">
<option *ngFor="let entity of (entities | dropdownData: filter.name) | async">{{entity.name}}</option>
</select>
In the ts I have following line in ngOnInit:
this.entities.subscribe(val => console.log(val));
Which gives the following output in console:
{displayRole: Array(4)}
displayRole: Array(4)
0: {id: 1, name: "TEST1", title: "TEST1", priorityError: 4, priorityOffline: 3, …}
1: {id: 2, name: "TEST2", title: "TEST2", priorityError: 4, priorityOffline: 4, …}
2: {id: 3, name: "TEST3", title: "TEST3", priorityError: 4, priorityOffline: 4, …}
3: {id: 4, name: "TEST4", title: "TEST4", priorityError: 3, priorityOffline: 1, …}
length: 4
__proto__: Array(0)
__proto__: Object
Not working example:
<select class="test-form__field form__field form__field--error" [name]="field.name" [formControlName]="field.name">
<option *ngFor="let item of (field.data | dropdownData : field.name) | async">{{item.name}}</option>
</select>
In the ts I have following line in ngOnInit:
field.data.subscribe(val => console.log(val));
Which prints the following output in console:
{displayRole: Array(4)}
displayRole: Array(4)
0: {id: 1, name: "TEST1", title: "TEST1", priorityError: 4, priorityOffline: 3, …}
1: {id: 2, name: "TEST2", title: "TEST2", priorityError: 4, priorityOffline: 4, …}
2: {id: 3, name: "TEST3", title: "TEST3", priorityError: 4, priorityOffline: 4, …}
3: {id: 4, name: "TEST4", title: "TEST4", priorityError: 3, priorityOffline: 1, …}
length: 4
__proto__: Array(0)
__proto__: Object
So the console prints the same result twice. Hope you can help me.
Appreciate it!
Fr34k
Your error is that you are chaining wrong the pipes.
Check the following resource:
https://angular.io/guide/pipes#chaining-pipes
You should apply first: async and then dropdownData: filter.name
Your code should be like this:
component.html
<select class="test-table__input-filter table__input-filter" [formControl]="filter.control">
<option *ngFor="let entity of entities | async | dropdownData: filter.name">{{entity.name}}</option>
</select>
another component
<select class="test-form__field form__field form__field--error" [name]="field.name" [formControlName]="field.name">
<option *ngFor="let item of field.data | async | dropdownData : field.name">{{item.name}}</option>
</select>
Check if works with that change.
$scope.accounts = [
{id: 1, name: 'Tommy',status:'premium'},
{id: 2, name: 'Alexander',status:'free'},
{id: 3, name: 'Lorem',status:'banned'},
{id: 4, name: 'Ipsum',status:'premium'}
{id: 5, name: 'Dot sit',status:'Y'}
];
How can I adjust dynamically to the situation in this json output?
for example, multiple data in groupby
<select>
<option>premium</option>
<option>free</option>
<option>banned</option>
<option>y</option>
</select>
(My English is bad )
<select ng-options="item as item.status for item in (accounts | unique: 'status')"></select>
You need to include the filter from https://github.com/angular-ui/angular-ui-OLDREPO/tree/master/modules/filters/unique
Does anyone know why AngularJS not selecting options on <select multiple> if ng-model is an array of integer?
$scope.selected = [1, 3]
$scope.options = [
{id: 1, title: 'option 1'},
{id: 2, title: 'option 2'},
{id: 3, title: 'option 3'}
]
Everything works just fine if $scope.selected = ['1', '3'] is array of string. I need to get it working without using ng-options.
Here is JSFiddle:
http://jsfiddle.net/maxflex/3jfk8/19/
I have created a select box in two different ways with AngularJS. One with static options in the HTML and ng-model and one with ng-options.
Both populate the select box, however, when a value comes back from the REST API the select box stays blank.
The docs suggest tracking by id.
<select id="delimiter" name="delimiter" ng-model="config.delimiter"
ng-options="option.name for option in data.availableOptions track by option.id">
</select>
$scope.data = {
availableOptions: [
{id: '44', name: 'Comma'},
{id: '9', name: 'Tab'},
{id: '32', name: 'Space'},
{id: '124', name: 'Pipe'},
{id: '59', name: 'Semi-Colon'},
{id: '58', name: 'Colon'}
],
selectedOption: {id: '44', name: 'Comma'} //This allegedly sets the default value of the select in the ui
};
//Truncated version of what happens after API call
$scope.config = $scope.result.selectedConfig;
The data that comes from the server contains the numbers i.e. the ids.
The config option is supposed to have the delimiter set on it and then the select box is supposed to select the correct item, but it doesn't.
However, a simple example like this DOES work at selecting the correct item so it must be something with the binding after the REST call.
<body ng-app ng-controller="AppCtrl">
<div>
<label>Delimiter</label>
<select ng-model="mydelimiter">
<option value="44">Comma</option>
<option value="9">Tab</option>
<option value="32">Space</option>
<option value="124">Pipe</option>
<option value="59">Semi-Colon</option>
<option value="58">Colon</option>
</select>
</div>
</body>
function AppCtrl($scope) {
$scope.mydelimiter = '59';
}
I'm not sure if this is exactly what you were looking for but if you'er just trying to set a specific default value, set the model to the selectedOption
$scope.config = {};
$scope.data = {
availableOptions: [
{id: '44', name: 'Comma'},
{id: '9', name: 'Tab'},
{id: '32', name: 'Space'},
{id: '124', name: 'Pipe'},
{id: '59', name: 'Semi-Colon'},
{id: '58', name: 'Colon'}
],
selectedOption: {id: '44', name: 'Comma'}
};
$scope.config.delimiter = $scope.data.selectedOption;
Or you could set it directly from the array:
$scope.config.delimiter = $scope.data.availableOptions[0];
Here's a fiddle with a working example:
http://jsfiddle.net/pkobjf3u/1/
I have a form that has a set of radio buttons (3 choices), and I am using angular and the ng-repeat directive to populate the html:
<div ng-repeat="fruit in fruitbasket">
<input type="radio" name="fruit" data-ng-model="fruit.isSelected">{{fruit.id}}
</div>
the inside of the controller for the fruit basket looks like this:
$scope.fruitbasket = [{isSelected: false, id: "Orange", value: "1"}, {isSelected: true, id: "Pear", value: "2"}, {isSelected: false, id: "Apple", value: "3"}]
The choices in the view are Orange, Pear, and Apple, but after one is selected I want to pass the numeric "value"
Not sure how to do this in angular, I have tried several things, but non successful. Each time the passed value shows as nil
How does a connected element of an object get passed from a radio button in Angularjs?
Here's how you do it:
isSelected is not needed. The fruitbasket is not part of your model, only the selected fruit is.
$scope.fruitbasket = [
{id: "Orange", value: "1"},
{id: "Pear", value: "2"},
{id: "Apple", value: "3"}
];
$scope.model={selectedFruit:2};
Assign the value (fruit.value) to each option and bind it to your model (model.selectedFruit)
<input value="{{fruit.value}}" data-ng-model="model.selectedFruit" type="radio" name="fruit" > {{fruit.id}}
Check out this working plnkr example.