<select ng-option="ubrandname as ubrandname.brand for brand in ubrandname track by ubrandname.brand" ng-model="ubrandname"></select>
this is my dropdownlist for calling dynamic set of data from my js file
//brandnamebyid
$http.get('/brandinfo.asmx/getbrandname', {
params: {
log: log,
pm: pm,
id: $scope.updateparam.Id
}
})
.then(function (response) {
{
$scope.brandfunction = response.data.branddetails;
$scope.ubrandname = $scope.brandfunction[0];
console.log($scope.ubrandname);
}
});
i think i am unable to write correct syntax of ng-option in my dropdownlist, can anyone help me out here?
Your ng-model and ng-option data source seems same. Please try as below,
<select ng-option="brand as brand.brand for brand in brandfunction track by $index" ng-model="ubrandname"></select>
Try this
<select ng-model="ubrandname">
<option ng-repeat="brandname in brandfunction" value="{{brandname}}">{{brandname}}</option>
</select>
Related
I am facing an issue of [ngRepeat:dupes].
systemService.getAllSystemSettings().then(
function (obj) {
$scope.project.meta.franchise = obj.find(item => item.keyword === "Program");
console.log($scope.project.meta.franchise);
$scope.project.meta.franchise = $scope.project.meta.franchise['keywordValue'].split(';');
console.log($scope.project.meta.franchise);
return $scope.project.meta.franchise);
});
in my HTML page :
<select class="form-control" ng-model="project.meta.franchise" ng-disabled="readOnlyUser">
<option ng-repeat="option in project.meta.franchise" value="{{option}}">{{option}}</option>
</select>
Output in console :
{ keyword: "Program", keywordValue: "test_abc;abc_&xyz;efg_&_hij"
}
[
"test_abc",
"abc_&xyz",
"efg_&_hij"
]
error in console:
Please help me out in solving I tried putting track by $ index but no solution with that too. By using $track by it does not show the list in options. ThankYou in advance.
Try changing the value of the ng-model to project.franchise in your HTML code. Below is the code I applied and it worked for me:-
<select class="form-control" ng-model="project.franchise" ng-disabled="readOnlyUser">
<option ng-repeat="option in project.meta.franchise)" value="{{option}}">{{option}}</option>
</select>
try to make a custom unique index like this
<select class="form-control" ng-model="project.meta.franchise)" ng-disabled="readOnlyUser">
<option ng-repeat="option in project.meta.franchise track by ($index + ':' + option)" value="{{option}}">{{option}}</option>
</select>
Try giving multiple = 'true' in your HTML select statement. Please refer to Davis Ford's post in GitHub regarding the same.
What is the proper way to implement dropdowns in ng2? I did some googling but I wasn't finding a lot of consistency.
My search.component.ts has a searchMetadata property which gets set via ngOnInit().
searchMetadata.Authors looks like [{Id=1, Value="Bob Smith"},{Id=2, Value="Mary Jones"}]
The final ng2 dropdown should be something like this:
<select #ddlAuthor (change)="updateSearchResults()">
<option value="1">John Smith</option>
<option value="2">Jane Doe</option>
<option value="3">John Denver</option>
</select>
What is the proper way to implement ng2 for this in the component.html?
You can use *ngFor to iterate over an array/collection populate the value and text accordingly. I've updated the answer to simulate a delay of 3000ms before setting the values to mimic an HTTP API call.
HTML:
<select #ddlAuthor (change)="updateSearchResults($event)">
<option *ngFor="let option of options" [value]="option.Id">{{option.Value}}</option>
</select>
TS:
export class App {
options: any[];
constructor() {}
ngOnInit() {
// simulated delay for API call
Observable
.of([
{Id:1, Value:"Bob Smith"},
{Id:2, Value:"Mary Jones"}
]).delay(3000).subscribe(values => {
this.options = values;
});
}
updateSearchResults($event) {
console.log($event);
}
}
Here is a plunker demonstrating the functionality.
Note: The array you referenced in your question [{Id=1, Value="Bob Smith"},{Id=2, Value="Mary Jones"}] is not valid JavaScript syntax. Objects are structured as { key: value }, it would need be a colon ":" character between the key and value rather than a equal sign "=" like in C# Object Initialization. Having the "=" will cause errors in your Angular application.
Hopefully that helps!
This works:
<select (change)="updateSearchResults()" #ddlAuthor>
<option *ngFor="let author of blogSearchMetadata.Authors">{{author.Value}}</option>
</select>
I'm trying to get a select box working in Angular. The problem I'm experiencing is to do with ng-init and setting it's default value from an object which is created during runtime. Heres my code:
<select
ng-model="settings.editing.panel.data.production_company"
ng-change="settings.editing.panel.data.production_company = selectValue"
ng-init="selectValue = settings.editing.panel.data.production_company"
>
<option
ng-repeat="(key, value) in lists.production_companies"
value="{{key}}"
ng-selected="{{selectValue}}"
>
{{value}}
</option>
</select>
"lists.production_companies" is a simple key-value array of names, populated during initial page render, updated by ajax.
The object "settings.editing.panel.data" starts its life as NULL, but later is loaded with a correctly formatted object which contains the property "production_company".
I have found setting ng-init to something like "ng-init="selectValue = 3" works fine. Setting a $scope.test = 3, then setting "ng-init="selectValue = test" works fine too.
However, my dynamic value does not work. How can I use my dynamically created object to set the value of this select box during runtime with the set-up I have?
<select
ng-model="settings.editing.panel.data.production_company"
ng-options = "option as option.keyName for option in list.production_companies"
> <!--set keyName equal to your object's key-->
</select>
Then in your controller
$scope.settings.editing.panel.data.production_company = list.production_companies[0] // Or which value you want to assign
You question confused me somehow. The following snippet is a working one, is that what you want?
'use strict';
angular.module('DemoApp', []);
angular.module('DemoApp').controller('DemoCtrl', ['$scope', function($scope){
$scope.lists={
production_companies: { "0": "prod 1", "1":"prod_2" },
};
$scope.settings={
editing: {
panel: {
data: null
}
}
};
$scope.setData=function(data){
$scope.settings.editing.panel.data={
production_company: data
};
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<select ng-model = "settings.editing.panel.data.production_company">
<option ng-repeat = "(key, value) in lists.production_companies" value = "{{key}}">{{value}}</option>
</select>
<div>You select: {{settings.editing.panel.data.production_company}}</div>
<button ng-click="setData('0')">Set Data to Prod1</button>
<button ng-click="setData('1')">Set Data to Prod2</button>
</div>
In my circumstances I was able to change my backends data format to set an object like:
{"id": 1, "name":"prod comp 1"}
and then change my select model accordingly. In hindsight I needed this for the ID anyway.
<select
ng-model="settings.editing.panel.data.production_company"
>
<option
ng-repeat="option in settings.lists.production_companies"
value="{{option.id}}"
ng-selected="{{option.id}} == settings.editing.panel.data.production_company"
>
{{option.name}}
</option>
</select>
I have an array like below.
$scope.set = [
{"name":"name1", "value":"value1"}
{"name":"name2", "value":"value2"}
{"name":"name3", "value":"value3"}
]
I am trying to show the options based on previous selection. for example if i select name1 then for the next time i don't want to show the selected option. I want to show only remaining two names i.e, name2 and name3.
I'm trying to achieve this by using some filters but it is effecting the model $scope.set
Please help me in this. thanks in advance.
A possible solution for you problem can be found here on Fiddle. I've created something quickly from scratch since your post did not have an original Fiddle.
<div ng-app ng-controller="Controller">
Select value : <b>{{myDropDown.name}}</b><br/><br/>
Showing all other available options:
<select ng-options="item.name for item in items | filter: {name: '!' + myDropDown.name}" ng-model="myDropDown">
<option value="">Select other value</option>
</select>
</div>
function Controller ($scope) {
$scope.myDropDown = 'one';
$scope.items = [
{"name":"name1", "value":"value1"},
{"name":"name2", "value":"value2"},
{"name":"name3", "value":"value3"}
];
}
I need help with angularJS. I call ajax as follows:
$scope.$watch('value1', function() {
if ($scope.value1 != null) {
$http({
method : 'GET',
url : 'http://localhost:8080/program1/api/verify?post='+$scope.value1
}).success(function (result) {
$scope.data1 = result;
console.log("ajax->"+$scope.value2);
});
}
});
In my view i have the folloing code:
<div ng-controller="MainController">
<select ng-model="data1"
ng-options="data for data in data1">
<option value=""></option>
</select>
{{data1}}
</div>
My problem is that the dropdown doesn't change in the view.
Could anyone help me about it?
Thank you in advance
you issue is your ng-options and ng-model are using the same property data1.
When you select a value that selected value is bound to the property of ng-model so that is data1 however your ng-options is using data1 so it gets overwritten.
So basically your ng-options and ng-model should use two different properties of your scope. One representing the selected value, the other being the array of values to populate the options.
see fiddle: http://jsfiddle.net/1uzyoLmr/
<select ng-model="data1"
ng-options="d for d in data">
<option value=""></option>
</select>
{{data1}}
and your controller
$scope.data1;
$scope.data = [10, 11, 23];
Docs for reference: https://docs.angularjs.org/api/ng/directive/ngOptions