We Keep Coding

Angular JS Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed

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.

Select tag ng-model returns an undefined value

I have a select tag in my html code like this:
<select ng-model="brandList" name="brandList" style="width:110px;" >
<option value="" selected>---Please select---</option>
<option ng-repeat="item in brandnameList | unique:'brandname'" value="{{item.brandname}}" style="width:50px;"> {{item.brandname}}</option>
</select>
The values in my select was fetched from the database via API and the code goes like this.
adminService.getbrandnameList()
.then(function(data){
$scope.brandnameList = data.data;
$scope.brandn=data.data[0].brandname;
});
I have another function that needs the selected value on the select tag
$scope.ExportmodalAdmin = function () {
alert( $scope.brandList )
}
But the model for the select which is $scope.brandList returns an undefined value. How can I fix this? I need the value from the select tag to be passed on the function.

Hope you have defined the variable brandList in your controller.
$scope.brandList = {};
Also, Change your ng-repeat statement as below:
<select ng-model="brandList" name="brandList" ng-options="item.brandname for item in brandnameList" style="width:110px;" ng-change="alertChange()" >
<option value="" selected>---Please select---</option>
</select>
Controller code to check change:
$scope.alertChange = function(){
alert($scope.brandList.brandname);
};
look at plunker reference here plunk

Angular select, ng-init with dynamic value

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>

default value using ng-select loop through array of object

For now the select is blank, I think angular added it by default. I want the default to be American, but I trid ng-selected="country.name == 'American'" it doesn't work?
my DOM
<select name="country" ng-model="user.country"
ng-options="country.name for country in country_list" >
{{name}}
</select>
http://jsbin.com/tocojojora/edit?html,css,js,console,output

You can do this, ng-init="value='American Samoa'" this will set the default value in dropdown
<select ng-model="value" ng-init="value='American Samoa'" ng-options="code.name as code.name for code in country_list">
</select>
DEMO

$scope.user = {country: $scope.country_list[4]};
Set the default user country in your controller(less logic in your html template).
JSBin

The reason your code was not working was because of this:
ng-options="country.name for country in country_list"
In my understanding, here value will be {name: 'Afghanistan', code: 'AF'} and not Afghanistan or AF.
You should try something like this:
ng-options="country.code as country.name for country in country_list"
Here value will AF and you can use ng-init to set it as
user.country = 'AS'
Sample Fiddle.

use something like this in your controller
$scope.user = {country:"American"}; //Default value to dropdown

How to set the first select option to always be blank

I am using angularjs in a project and in which I am using ng-options for generating <select>.
Initially, when the pages reload and no option element is selected, the HTML generated like below:
<select size="3" ng-model="item" ng-options="s.name for s in itemlist">
<option value="?" selected="selected"></option>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
</select>
But when I select an element (ex. Item 2) the first blank select is gone. I know its happening as ng-model is being set by select value. But I want first select always blank so that user can reset the filter.

This will do the work for you:
<select size="3" ng-model="item" ng-options="s.name for s in itemlist">
<option value="">Select Option</option>
</select>

For anyone out there that treat "null" as valid value for one of the options (so imagine that "null" is a value of one of the items in typeOptions in example below), I found that simplest way to make sure that automatically added option is hidden is to use ng-if.
<select ng-options="option.value as option.name for option in typeOptions">
<option value="" ng-if="false"></option>
</select>
Why ng-if and not ng-hide? Because you want css selectors that would target first option inside above select to target "real" option, not the one that's hidden. It gets useful when you're using protractor for e2e testing and (for whatever reason) you use by.css() to target select options.
Kevin - Sưu Tầm

You can forgo using the ng-options and use ng-repeat instead and make the first option blank. See example below.
<select size="3" ng-model="item">
<option value="?" selected="selected"></option>
<option ng-repeat="s in itemlist" value="{{s.value}}">{{s.name}}</option>
</select>

It appears that your best option would be to have the blank item included as the first item in itemlist.

The solution above will corrupt the model with junk data.
Please use the directive to reset the model in the right way
JS:
Select Option
Directive"
.directive('dropDown', function($filter) {
return {
require: 'ngModel',
priority: 100,
link: function(scope, element, attr, ngModel) {
function parse(value) {
if (value) {
if(value === "")
{
return "crap"
}
else
{
return value;
}
} else {
return;
}
}
ngModel.$parsers.push(parse);
}
};
});

I had same problem and after a lot of googling,I understood the main issue was related to my angular version, if you use Angular 1.6.x, just use the ng-value directive and it will work as expected.
also I set an initial value in my controller, like this :
$scope.item = 0;

<select ng-model="dataItem.platform_id"
ng-options="item.id as item.value for item in platformList"
ng-init="dataItem.platform_id=dataItem.platform_id||platformList[0].id"></select>

Controller
$scope.item = '';
$scope.itemlist = {
'' = '',
'Item 0' = 1,
'Item 1' = 2,
'Item 2' = 3
};
HTML
<select data-ng-model="item" data-ng-options="v as k for (k, v) in itemlist"></select>