I am trying to populate my select in html using ng-repeat, but it does not work. I observed that my ng-repeat appears to be commented when i inspect my browser.
My html:
<select ng-model="transportcompanies" ng-options="TransportCompany in transportcompanies" value="{{TransportCompany.denumire}}">
<option>{{ TransportCompany.denumire }}</option>
</select>
My get service from server.js:
app.get('/#!/races/insert', (req, res) => {
TransportCompany.findAll({
attributes: ['id_firma', 'denumire']
})
.then((transportcompanies) => {
res.status(200).send(transportcompanies)
})
.catch((error) => {
console.warn(error)
res.status(500).send('error')
})
})
My controller:
angular.module('raceModule').controller('racesInsertController', ['$scope', '$http', '$state', function($scope, $http, $state) {
const SERVER = 'https://proiectweb-sebastianburchi.c9users.io/#!'
let $constuctor = () => {
$http.get(SERVER + '/races/insert')
.then((response) => {
$scope.race=response.data
})
.catch((error) => console.log(error))
}
$constuctor()
$scope.open = function($event,opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};
$scope.getTemplate = (TransportCompany) => {
return 'display'
}
}])
i have edit my post trying to work with ng-options.Ng-repeat is not working. Now it displays me, but i have TransportCompany.denumire as option..not it's value
TRY This
<option ng-repeat="TransportCompany in transportcompanies"> {{TransportCompany.denumire}}</option>
You have written the same name for both ng-repeat iterator object and options. So, when you select an option from select list, the value over writes. So, change the names to some other as:
<select ng-model="transportcompanies">
<option ng-repeat="TransportCompany in transportcompanies" value="{{TransportCompany.denumire}}">TransportCompany.denumire</option>
</select>
to:
<select ng-model="someothername">
<option ng-repeat="TransportCompany in transportcompanies" value="{{TransportCompany.denumire}}">TransportCompany.denumire</option>
</select>
<select>
<option ng-repeat="option in options" ng-value="option.html">
{{option.display}}
</option>
</select>
Please refer to the plunker https://plnkr.co/edit/EgOJaWCjQtv7jDB5RS39?p=preview
First of all, please maintain the naming conventions. Apart of that, below should be working fine:
<select ng-model="transportcompanies">
<option ng-repeat="TransportCompany in transportcompanies" value="{{TransportCompany.denumire}}">{{TransportCompany.denumire}}</option>
</select>
For your reference : Plunkr link
Your response data if assigned to $scope.race, so try to iterate on race.
<select ng-model="transportcompanies" ng-options="TransportCompany in race" value="{{TransportCompany.denumire}}">
<option>{{ TransportCompany.denumire }}</option>
</select>
Related
Here's my code:
function Component(props) {
const [message, setMessage] = useState({
type: "",
text: "",
});
return (
<div>
<select
onChange={(ev) => {
setMessage({ type: **CAN SOMETHING GO HERE???**, text: ev.target.value });
}}
required
>
<option value="Ask a question" **DIFFERENT ATTRIBUTE TO SET TYPE WITH???**>Question</option>
<option value="Leave a comment">Comment</option>
<option value="Voice a concern">Concern</option>
</select>
</div>
);
}
export default Component;
Is it possible to somehow have another value or something similar in my options so that I can set both the type and text from the same onChange function? I'm not sure how else to do it and I need both a type and a text for a message to work.
As #DCR's linked question notes, you can use data- attributes to store your data and read them with the dataset property, like this:
function Component(props) {
const [message, setMessage] = useState({
type: "",
text: "",
});
return (
<div>
<select
onChange={(ev) => {
let selected = ev.target[ev.target.selectedIndex];
setMessage({ type: selected.dataset.type, text: ev.target.value });
}}
required
>
<option value="Ask a question" data-type="negative">Question</option>
<option value="Leave a comment" data-type="positive">Comment</option>
<option value="Voice a concern" data-type="negative">Concern</option>
</select>
</div>
);
}
export default Component;
You need the ev.target[ev.target.selectedIndex] part because ev.target is the <select> element but you need to get the selected <option> element from inside it.
(Since you did not say how you plan to use this type data, I made up an example that it will say whether the feedback is positive or negative. This is just an example.)
I want to show value on select option with ng-model but value doesn't show. This is my update page, so i must need ng-model from which i send my country_id also i need to show country name here is my code
<select data-ng-model="ticket[0].country_id" ng-option="x in ticket['get_country']"id="country">
<option value="{{ x.name }}">{{ x.name }}
</option>
</select>
this is the code from which i get the name of country from angularjs code
.then(
function successCallback(response) {
console.log(response.data['get_country'][0]['name']);
$scope.country = response.data['get_country'][0] ['name']
$scope.ticket = response.data;
},
function errorCallback(response) {
alert("Error. Try Again!");
}
You can use ng-options like this
<select data-ng-model="ticket[0].country_id" ng-option="x.name as x.name for x in ticket['get_country']"id="country"></select>
if you print the model, you can see the name of the item that what you selected.
I'm trying to create two select dropboxes that one filters the other in angular.
1st select:
<select [(ngModel)]="selectedOption1">
<option *ngFor="let option of options1" [ngValue]="option.value">
{{option.description}}
</option>
</select>
2nd select:
<select [(ngModel)]="selectedOption2">
<option *ngFor="let option of options2 | filterOption2ByOption1:selectedOption1"
[ngValue]="option.value">
{{option.Category2Name}}
</option>
</select>
options1:
options1 = [{
description:"option 1-1",
value:1
},
{
description:"option 1-2",
value:2
}]
options2:
options2 = [{
option1Value:1,
description:"option 2-1",
value:1
},
{
option1Value:2,
description:"option 2-2",
value:2
}]
pipe looks like this:
#Pipe({
name: 'filterOption2ByOption1'
})
export class FilterOption2ByOption1 implements PipeTransform {
transform(options2: any, option1Value: number): any {
if(option1Value !== null && option1Value !== undefined){
return options2.filter(option => option.option1Value == option1Value)
}
return null;
}
}
what doesn't seems to work is that after the filter does its magic the ngModel
does not change.
click event nor [ngModelChange] are triggered if I trying to add them to 2nd select.
the pipe works fine. the only problem is that the ngModel is not effected by it.
i have directive which return template --
angular.module('ui-module').directive(
'onelineDir',
['$http', '$compile','$timeout',
function($http, $compile,$timeout) {
function controller($scope, $attrs) {
}
return {
restrict : 'E',
transclude : false,
scope : {
dir : '=',
img : '='
},
controller : controller,
link : function($scope, element, attrs) {
$scope.showModal = function() {
};
},
template : '<span><span ng-click="showModal()">Add New</span></span>',
replace : true
};
}]);
and in html select tag is below--
<select class="input-xlarge" ui-select2 name="category" ng-model="file.category" ng-disabled="file.fileError==='true' && file.duplicate==='false'">
<option value=""></option>
<option ng-repeat="c in categories" value ={{c.id}}>{{c.description}}</option>
<option value="n"><oneline-dir dir="dirItem" img="true" ng-disabled="file.fileError==='true'"></oneline-dir></option>
</select>
above i am trying to put directive template like Add New as option.
but it is not replacing template.
if i use directive outside select tag it working fine and it is display as Add New.
please give me some suggestion to solve this.
I need to call an AngularJS function from selection:
<select ng-model="selection" >
<option onselect="angular.element(this).scope().functionCall('one')">one</option>
<option onselect="angular.element(this).scope().functionCall('two')">two</option>
<option onselect="angular.element(this).scope().functionCall('three')">three</option>
<option onselect="angular.element(this).scope().functionCall('four')">four</option>
</select>
However, the function never gets called.
In the controller,
$scope.functionCall = function(value){
// do stuff with value
}
How can I call the function.
It's recommended that you use ng-change for that matter, the result may be the same as Cyril's, but the code is more readable and testable, also it is considered a better practice:
Here is a plunker demonstrating it in action:
http://plnkr.co/edit/7GgwN9gr9qPDgAUs7XVx?p=preview
app.controller('MainCtrl', function($scope) {
$scope.listOfOptions = ['One', 'Two', 'Three'];
$scope.selectedItemChanged = function(){
$scope.calculatedValue = 'You selected number ' + $scope.selectedItem;
}
});
And the HTML:
<select ng-options="option for option in listOfOptions"
ng-model="selectedItem"
ng-change="selectedItemChanged()">
</select>
Hope that helps. Thanks.
A Little bit to add on Cyril's and Fedaykin answers:
HTML code
<select ng-options="option for option in listOfOptions"
ng-model="selectedItem"
ng-change="selectedItemChanged()">
Controller Code
app.controller('MainCtrl', function($scope) {
$scope.listOfOptions = ['One', 'Two', 'Three'];
$scope.selectedItemChanged = function(){
console.log($scope.selectedItem);
}
});
You will notice that when the select option is changed, a function gets called which will give the you the value of the current selected value.
Here's what you could do :
HTML
<div ng-controller="YourController">
<select ng-model="selection" ng-options="choice for choice in choices"></select>
</div>
YourController :
$scope.choices = ["first choice", "second choice",...]
$scope.$watch('selection', function(newVal, oldVal){
switch(newVal){
case 'first choice':
[do Some Stuff]
break;
case 'second choice':
[do Some Stuff]
break;
default:
[well, do some stuff]
break;
}
}
BTW: I decided to put the options in the javascript, but what you did also works.
EDIT : ng-change VS $watch, see this question
First, onselect is not a angular keyword, It's a normal javascript keyword
You should use ng-change param in select or use like below..,
In HTML code you have to use like this.,
<select ng-model="selection" >
<option onselect="functionCall('one')">one</option>
<option onselect="functionCall('two')">two</option>
<option onselect="functionCall('three')">three</option>
<option onselect="functionCall('four')">four</option>
</select>
and in the controller
function functionCall(value){
//do stuff with value
}