I created a local db.json file that looks like this:
{
"project_topics": [
"- Any -",
"Access for disadvantaged",
"Agriculture, forestry and fisheries",
"Animal welfare",
"Energy and resources",
"Enhance social inclusion, equal opportunities and participation in sports",
"Enterprise, industry and SMEs (incl. entrepreneurship)",
"Entrepreneurial learning - entrepreneurship education",
"Environment and climate change"
]}
I want to populate input with ng-repeat and I do it like so:
<label class="item item-select " id="findYourProject-select3">
<span class="input-label">type of project</span>
<select ng-repeat="topic in project_topics"></select>
</label>
The input is not being populated. What should I consider?
You have to give ng-repeat for options not select
see the plunker json from external file http://plnkr.co/edit/tpl:8rFfZljYNl3z1A4LKSL2?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$http) {
$scope.data = {
"project_topics": [
"- Any -",
"Access for disadvantaged",
"Agriculture, forestry and fisheries",
"Animal welfare",
"Energy and resources",
"Enhance social inclusion, equal opportunities and participation in sports",
"Enterprise, industry and SMEs (incl. entrepreneurship)",
"Entrepreneurial learning - entrepreneurship education",
"Environment and climate change"
]};
/* var urlPath = 'db.json';
$http.get(urlPath).then(function(response) {
$scope.data = response.data;
}, function(error) {
});*/
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<select ng-model="singleSelect">
<option ng-repeat="topic in data.project_topics">{{topic}}</option>
</select>
</body>
<label class="item item-select " id="findYourProject-select3">
<span class="input-label">type of project</span>
<select>
<option ng-repeat="topic in project_topics" value="{{topic}}">{{topic}}</option>
</select>
</label>
You want to repeat the option. Not the select.
Related
This question already has answers here:
Angular injects "string:" before value in ng-options
(2 answers)
Closed 5 years ago.
When I add ng-options to a select element, I get options that look like this:
<select name="folderId" data-ng-model="message.folderId" data-ng-options="folder.id as folder.name for folder in folders">
<option value="" class="">No Folder</option>
<option label="Bulk" value="string:0fedcc77-4cc5-4a9a-ba2f-847f8581d4d7" selected="selected">Bulk</option>
<option label="Auto Responder" value="string:d0898116-88ce-4e25-8d91-b17a7a29adc1">Auto Responder</option>
<option label="Customer Service" value="string:6ec044c1-c378-42de-82ad-f3dc63c58f00">Customer Service</option>
</select>
The problem with the above is that Angular is adding string: in front of the folder ID. This form is submitting data to a remote page when clicked. However, the string: is turning a valid guid into an invalid guid. would it be possible to instruct Angularjs to not add extra information to the value attribute?
Thanks.
Try change to this
<select name="folderId" data-ng-options="folder.id as folder.name for folder in folders track by folder.id">
var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
$scope.folders = [{
"name": "A",
"id": "12"
}, {
"name": "B",
"id": "15"
}, {
"name": "C",
"id": "13"
}];
$scope.folder = $scope.folders[0];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="FirstCtrl as vm">
<form name="form">
<select name="folderId" ng-model="folder" data-ng-options="folder as folder.name for folder in folders track by folder.id"></select>
</form>
</div>
I have two select box div for gettting scoredetails home teams and awayteams first and second innings
These two div are come in tabs only
So i need same ng-model in both innings for code reusing.but when i am using my browser will hang
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.homePlayers = [{
"id": "586150f2d99139510b4254bb",
"name": "Sachin Tendulkar",
"country": "India"
}, {
"id": "586150f2d99139510b4254b1",
"name": "Saurav Ganguly",
"country": "India"
}];
$scope.awayPlayers =
[{
"id": "586150f2d99139510b4254b2",
"name": "Shane Watson",
"country": "Aus"
}, {
"id": "586150f2d99139510b4254b3",
"name": "Steve Waugh",
"country": "Aus"
}];
});
this is my html content how to populate
<body ng-app="plunker" ng-controller="MainCtrl">
India bat vs Aus bowl<br>
<div class="row">
<select ng-model="battingDetail.batterId">
<option ng-repeat="item in homePlayers" value="{{item.id}}">{{item.name}}</option>
</select> <select ng-model="bowlingDetail.bowlerId">
<option ng-repeat="item in awayPlayers" value="{{item.id}}">{{item.name}}</option>
</select>
<a ng-click="submitScores('hometeam')">UPDATE SCORE</a>
</div>
Aus bat vs India bowl<br>
<div class="row">
<select ng-model="battingDetail.batterId">
<option ng-repeat="item in awayPlayers" value="{{item.id}}">{{item.name}}</option>
</select> <select ng-model="bowlingDetail.bowlerId">
<option ng-repeat="item in homePlayers" value="{{item.id}}">{{item.name}}</option>
</select>
<a ng-click="submitScores('awayteam')">UPDATE SCORE</a>
</div>
</body>
I have two select box div for gettting scoredetails home teams and awayteams first and second innings
These two div are not come in same page in my webpage tabs only.But when i am using this way ny browser will hang.
So i need same ng-model in both innings for code reusing.but when i am using my browser will hang
Given a table of JSON data, I need to be able to filter the results based upon the movie genre the user selects from a dropdown menu. I currently have all of the genres from each movie being pulled in, but need to only have each genre available, show up once.
Here's a sample of the JSON:
{
Rank: 1,
Duration: "1 hr. 47 min.",
Description: "The Friedmans are a seemingly typical, upper-middle-class Jewish family whose world is instantly transformed when the father and his youngest son are arrested and charged with shocking and horrible crimes. Caught up in hysteria and with their community in an uproar, the family undergoes a media onslaught. The film inquires not just into the life of a family but into a community, a legal system, and an era.",
Director: "Andrew Jarecki",
Genres: [
"Documentary",
"Special Interest"
],
Actors: [
"Arnold Friedman",
"Elaine Friedman",
"David Friedman",
"Seth Friedman",
"Jesse Friedman",
"Howard Friedman",
"John McDermott",
"Frances Galasso",
"Anthony Sgueglia",
"Detective Frances Ga...",
"Joseph Onorato",
"Judd Maltin",
"Judge Abbey Boklan",
"Ron Georgalis",
"Scott Banks",
"Debbie Nathan",
"Jerry Bernstein",
"Peter Panaro",
"Lloyd Doppman",
"Jack Fallin"
],
Id: 605,
Name: "CAPTURING THE FRIEDMANS (2003)"
}
Here's the markup:
<body ng-app='myApp' ng-controller='MyController'>
<div class="col-lg-12">
<div class="form-inline col-lg-4">
<div class="form-group">
<label for="Name">Search by movie title</label>
<input ng-model="movie" type="text" class="form-control" id="name" placeholder="Title">
</div>
<div class="form-group">
<label for="Actor">Search by actors</label>
<input ng-model="actor" type="text" class="form-control" id="actors" placeholder="Actors">
</div>
</div>
<label for="genres">Search by genre</label>
<select class="form-control" ng-init="cc={Genres: ''}">
<option ng-repeat="movies in results" value="{{movies.Genres}}" ng-model="cc.movies">{{movies.Genres}}</option>
</select>
<table class="table-striped col-lg-8">
<thead>
<td width="15%">Name</td>
<td width="30%">Actors</td>
<td width="10%"></td>
</thead>
<tr ng-repeat="movies in results | filter:Genres">
<td>{{movies.Name}}</td>
<td><li ng-repeat="laptop in movies.Actors | filter:actor" >
<span ng-bind="laptop"></span>
</li></td>
<td>{{movie.Name}} <a class="bookMovie" href="http://www.fandango.com/{{movies.Name}}">Book Now!</a></td>
</tr>
</table>
</div>
and the controller:
app.controller("MyController", ["$scope","$http",
function($scope, $http) {
$http.get('test.json').then(function (response){
console.log(response);
$scope.results = response.data;
});
}]);
Here's the current working plunker with dropdown:
https://plnkr.co/edit/fqJt7pqTc9XKgjgDuGjd?p=preview
You will need to create a list of all unique genres once you get the json data back from your http.get request. I am using Lodash functions to simplify the code
...
$scope.results = response.data
$scope.genres = [];
//Go through every movie
_.forEach($scope.results, function(result) {
//Go through each genre for every movie
_.forEach(result.Genres, function(genre) {
// Add new unique genre to the list
if (!_.includes($scope.genres, genre) {
$scope.genres.push(genre);
}
});
});
Then change your ng-repeat to:
<option ng-repeat="genre in genres" value="{{genre}}">{{genre}}</option>
There a bit of a lot changes in your code for making genre filter to work as expected,so I made a Plunker for that.I've changed the way you written to display genre list from ng-repeat to ng-options.
We can still improve the rest of the filtering processes, but I've answered just to the context.
I have two input options that are linked via ng-model in order to display always the same country in both places.
<select ng-model="selectedCountry" ng-options="country.name for country in countries">
<select ng-model="selectedCountry" ng-options="country.name for country in countries">
Each country has different shipping costs, and once the country is selected you can also choose between different shipping options ("normal" and "express" with a radio button. I want to make it always display the "normal" cost when switching the country, and I made it by adding a ng-click to each of the input options and adding a ng-change in order to listen to the changes:
<select ng-model="selectedCountry" ng-options="country.name for country in countries" ng-change="changeShipping()" ng-click="shippingPrice=selectedCountry.shipping.normal">
The problem is that while the data shown in the view is the correct when changing the country, but the radio button is still set in the wrong option.
This is my controller logic:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.countries = [{
"name": "Freedonia",
"shipping" :
{
"normal":30,
"express":70
}
},{
"name": "Mordor",
"shipping" :
{
"normal":70,
"express":110
}
},{
"name": "Oz",
"shipping" :
{
"normal":140,
"express":180
}
}];
$scope.selectedCountry = $scope.countries[0];
$scope.changeShipping = function() {
return $scope.shippingPrice = $scope.selectedCountry.shipping.normal;
};
});
You can see a working fiddle here Thanks in advance!
Use ng-model with input[radio] and set it's value on select change.
UPDATED JSFIDDLE
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.shippingType = 'normal'; // initial value for input[radio]
$scope.countries = [{
"name": "Freedonia",
"shipping": {
"normal": 30,
"express": 70
}
}, {
"name": "Mordor",
"shipping": {
"normal": 70,
"express": 110
}
}, {
"name": "Oz",
"shipping": {
"normal": 140,
"express": 180
}
}];
$scope.selectedCountry = $scope.countries[0];
$scope.changeShipping = function () {
$scope.shippingType = 'normal'; // set back to normal on country change
return $scope.shippingPrice = $scope.selectedCountry.shipping.normal;
};
});
.summary{
background-color:gray;
border:1px solid black;
font-family:Arial;
margin-bottom:52px;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myCtrl" ng-app="myApp">
<div class="summary">
Summary:<br>
Country:<select ng-model="selectedCountry" ng-options="country.name for country in countries" ng-change="changeShipping()">
</select><br>
Shipping Costs:
{{selectedCountry.shipping[shippingType]}}
</div>
<div>
<select ng-model="selectedCountry" ng-options="country.name for country in countries" ng-change="changeShipping()">
</select>
</div>
Shipping costs:
<form>
<input type="radio" name="shippingOptions" value="normal" ng-model="shippingType">
Normal {{selectedCountry.shipping.normal}}<br>
<input type="radio" name="shippingOptions" value="express" ng-model="shippingType">
Express {{selectedCountry.shipping.express}}<br>
</form>
</div>
In AngularJS - I have dropdown code as below. type.entityTypeId field is a long data type. The dropdown works fine in the create page and able to insert the 'type.entityTypeId' field into the DB.
But it does not work while reloading the same data in the Edit page with same code.
Is this problem because I have the datatype as Long ?
I have other drop downs working fine in which I have all String data type.
<div class="form-group">
<label class="control-label col-md-2 required">ENTITY TYPE</label>
<div class="col-md-2">
<select name="entityType" class="form-control" ng-model="entity.entityType.entityTypeId"
required="required">
<option value="">Please select</option>
<option ng-repeat="type in entityTypes" value="{{type.entityTypeId}}">{{type.entityTypeName}}</option>
</select>
</div>
<span style="color: red" ng-show="entityAddForm.entityType.$invalid"> <span
ng-show="entityAddForm.entityType.$error.required">Entity type is required.</span>
</span>
</div>
Updated:
This is a json used to load the drop down data. And you can see the entityTypeId is a number. In other cases it works if the id is a String.
[
{
entityTypeId: 3,
entityTypeName: "Branch of Legal Entity"
},
{
entityTypeId: 1,
entityTypeName: "Legal Entity"
},
{
entityTypeId: 2,
entityTypeName: "Notional Entity"
}
]
As per the documentation at: https://docs.angularjs.org/api/ng/directive/select
It looks like you do need to use a String at the moment.
Using numbers should not be an issue. I know that the documentation only uses string, but I'm able to use the same using number.
<div ng-app="myApp" ng-controller="myController">
<select ng-model="entity.selected">
<option value="{{ent.entityTypeId}}" ng-repeat="ent in entityTypes">{{ent.entityTypeName}}</option>
</select>
Selected entity id {{entity.selected}}
</div>
angular.module("myApp", [])
.controller("myController", ["$scope", function ($scope) {
$scope.entityTypes = [{
entityTypeId: 3,
entityTypeName: "Branch of Legal Entity"
}, {
entityTypeId: 1,
entityTypeName: "Legal Entity"
}, {
entityTypeId: 2,
entityTypeName: "Notional Entity"
}];
$scope.entity = {
selected: 3
};
}]);
JSFiddle