I have a complex object like this
listItems = [
{ "id": 1, "name": "myname1" },
{ "id": 2, "name": "myname2" },
{ "id": 3, "name": "myname3" }
];
I want to create options from above listItems like this
<select>
<option value="1">myname1</option>
<option value="2">myname2</option>
<option value="3">myname3</option>
</select>
I have used this angularjs code, its generating the correct html code but whatever I select in dropdown is not shown inside the select box
<select ng-model="iList" ng-options="item.id as item.name for item in listItems track by item.id" />
Assuming listItems is in the $scope
<select ng-options="item.id as item.name for item in listItems"></select>
Related
When i am selecting from dropdown it bind into model but the label of selection showing blank.
<select class="form-control" ng-options="data as data.field for data in reportAnalysis.categoryFields track by data.id" ng-model="reportAnalysis.testData">
<option value="" selected disabled>---Select---</option>
</select>
Any solution Please help?
As per the data that you mentioned, your select statement should be categoryFields.response. Not sure if you have already set your categoryFields to hold response object directly. Also the data that you shared has a square bracket and curly brace missing, assuming it to be a typo error. You can check working jsfiddle link for more clarity
<select class="form-control" ng-options="data as data.field for data in reportAnalysis.categoryFields.response track by data.id" ng-model="reportAnalysis.testData">
<option value="" selected disabled>---Select---</option>
</select>
jsfiddle : https://jsfiddle.net/caq0ne1d/27/
Let me know if this helped.
var app = angular.module("Profile", [])
app.controller("ProfileCtrl", function($scope) {
$scope.reportAnalysis = {}
$scope.reportAnalysis['categoryFields'] = [{
"id": 178,
"field": "Attachments",
"sort_order": 1,
"field_type": [{
"id": 178,
"type": 5,
"is_mandatory": 0,
"conditional_field_id": 0,
"conditional_field_value": ""
}]
}]
$scope.reportAnalysis['testData'] = {}
$scope.update_data = function() {
console.log($scope.reportAnalysis['testData'])
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Profile" ng-controller="ProfileCtrl">
<select class="form-control" ng-options="data as data.field for data in reportAnalysis.categoryFields track by data.id" ng-model="reportAnalysis.testData" ng-change="update_data()">
<option value="" selected disabled>---Select---</option>
</select>
</body>
<li class="list-group-item" ng-repeat="entity in displayedProjectRoles">
<div>
<strong>Role: </strong>
<select
ng-model="project.role"
ng-options="option as option.name for option in project_role"
ng-required="true"
id="project_role"
class="form-control">
</select>
</div>
</li>
How can I set the value of model project.role based on the value on entity.role in the ng-repeat? I tried ng-selected or even using entity.role in the ng-model but it's not working properly.
this is the data in displayed Project Roles
[
{
"empid": 2,
"role": "employee"
},
{
"empid": 1,
"role": "pm"
}
]
and in the project_role
[
{
"id": 1,
"name": "employee"
},
{
"id": 2,
"name": "pm"
}
]
So basically the value of role in displayedProjectRoles matches with the name in project_role
This is a good example of angular select.
Essentially the ng-model for the select has to match the ng-option value to bind. In your example project.role would have to be exactly equal to option from your ng-options. Note this is type specific so had it been
option.id as option.name for option in project_role
and option.id == 1 then project.role == '1' will not bind
Let's say if I've data coming in JSON like this.
[
{
"id": 10,
"session": "test2",
"event": "Event 2"
},
{
"id": 11,
"session": "TEST 22",
"event": "Event 2"
},
{
"id": 9,
"session": "test 1",
"event": "Event 1"
}
]
I want to group the records by event, (Event 2 is repeated) and display a select box while keeping track of the id (on $scope so I can update the form).
Expectation.
<select>
<optgroup label="Event 1">
<option value="10">test2</option>
</optgroup>
<optgroup label="Event 2">
<option value="11">Test 22</option>
<option value="9">test 1</option>
</optgroup>
</select>
ng-options="opt.id as opt.session group by opt.event for opt in options"
Can any body help me with sample code?
I want to select country with AngularJS ui select2 and upon select, the corresponding state is loaded on a different select2 for state. And the country and state are located in a JSON data. The state has a Country Id.
Something like the documentation says? Assuming that you have an object data in your scope.
Data structure
{
"countries": [
{
"id": 1,
"name": "US",
"states": [
{"id": 1, "name"="CA"}
{"id": 2, "name"="NJ"}
]
},
{
"id": 2,
"name": "UK",
"states": [
{"id": 1, "name"="London"}
{"id": 2, "name"="Manchester"}
]
}
]
}
HTML View
<select ui-select2 ng-model="countryPicked" data-placeholder="Pick a country">
<option value=""></option>
<option ng-repeat="country in data.countries" value="{{country.id}}">{{country.name}} </option>
</select>
<select ui-select2 ng-model="statePicked" data-placeholder="Pick a state" ng-if="country">
<option value=""></option>
<option ng-repeat="state in data.countries[countryPicked]" value="{{state.id}}">{{state.name}}</option>
</select>
<p>Country picked: {{ countryPicked }}</p>
<p>State picked: {{ statePicked }}</p>
I want to create a dynamic model in angularjs. There is not seem to be a way to work as i want. I tried to declare as array but not even then worked
Controller
$scope.cccdirect = {}
$scope.items = [
{
id: 1231
title: "Product 1"
qty: 2
price: "25"
subtotal: "50"
direct = true
}
.....
]
View
<tr ng-repeat="item in items">
<select data-ng-model="cccdirect[item.id][direct]">
<option value="1000">Απομακρυσμένο κατάστημα</option>
<option value="1001">Άμεση Ενδοδιακίνηση</option>
<option value="1002">Εβδομμαδιαία Ενδοδιακίνηση</option>
</select>
<select ng-model="cccdirect[item.id][sendtype]" ng-options="t.title for t in types" data-ng-change="checkForCompaniesRow(item.id)"></select>
<select data-ng-show="cccdirect[item.id][show_companies]" ng-model="cccdirect[item.id][sendcompany]" ng-options="t.title for t in companies"></select>
<select data-ng-show="cccdirect[item.id][show_ktel]" ng-model="cccdirect[item.id][sendktel]" ng-options="t.title for t in ktel"></select>
</td>
</tr>
What i want is to get a model looked like this:
cccdirect = {[
item.id --> 1251:{
direct:1000,
sendtype:1002,
sendcompanies:23,
sendktel:0
},
item.id --> 2572:{
direct:1000,
sendtype:1002,
sendcompanies:23,
sendktel:0
},
]}