How to get value from dropdown list with angularjs - javascript

I populated a select box with data from the backend and it works well, but when I click on an item to get its value, it gives me undefined:
<div class="col-md-5">
<label class="child-label" for="existing-phases">Existing: </label>
<select class="form-control" ng-model="MyData">
<option disabled selected value>-- select an option --</option>
<option ng-repeat="var in payloadSecteur" value="{{var.id}}">{{ var.secteur }}
</option>
</select>
<a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>
Here's the function:
$scope.showPopup=function(){
alert('eee');
alert($scope.MyData);
};


This is a working snippet of your code without the value attribute set in the option tag and the options have been hard coded ,it is working perfectly
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<label class="child-label" for="existing-phases">Existing: </label>
<select class="form-control" ng-model="MyData">
<option disabled selected value>-- select an option --</option>
<option>heldfd</option>
<option>asdf</option>
<option>asdf</option>
<option>asdf</option>
</select>
<a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showPopup=function(){
alert($scope.MyData);
};
});
</script>


Did you put your html code to div with ng-app and ng-controller defined and defined them in your Angular file? Remember also to write your Angular function into the controller.
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a car:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
</div>
Angular:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
}
});
</script>
Remember also, that you don't have to use <option> tag - <select> with ng-options will be enough.


<div ng-controller="MyCtrl">
<div class="col-md-5">
<label class="child-label" for="existing-phases">Existing: </label>
<select class="form-control" ng-model="MyData" ng-options="payloadSecteur for payloadSecteur in payloadSecteur"></select>
<a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>
</div>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.payloadSecteur = ['one', 'two', 'three', 'four'];
$scope.showPopup = function() {
console.log('eee');
console.log($scope.MyData);
};
}
JSFiddle


Try this:
Pass ng-model as a parameter in showPopup() like
ng-click="showPopup(MyData)"
In controller
$scope.showPopup=function(selectedData){
alert('eee');
alert(selectedData);
};

Related

AngularJS <datalist> giving weird options

I'm trying to convert this:
<td class="col-md-2">
<select style="max-width:120px"
ng-model="row.gaProfileId"
ng-repeat="profile.id as weGaAdminCtrl.showProfile(profile) for profile in weGaAdminCtrl.profiles"
ng-change="weGaAdminCtrl.assignBrandToProfile(row)">
</select>
</td>
into something like this:
<td class="col-md-2">
<input type="text" list="datalist">
<datalist id="datalist">
<select style="max-width:120px;"
ng-model='row.gaProfileId'
ng-options='profile.id as weGaAdminCtrl.showProfile(profile) for profile in weGaAdminCtrl.profiles'
ng-change="weGaAdminCtrl.assignBrandToProfile(row)">
</select>
</datalist>
</td>
What I get is this:
Datalist preview
Now what I don't get is how it gives me "string:###". Does anyone know how I can alter this?

html :
<div ng-controller="MyCtrl">
<input list="trees" name ="trees">
<datalist id="trees">
//<select> is optional
<option ng-repeat="tree in trees" value="{{tree.name}}">{{tree.name}}</option>
//</select>
</datalist>
</div>
js :
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.trees = [
{'name':'oak'},
{'name':'ash'},
{'name':'fir'}
];
}
To fire ng-change from datalist in Angular 1.x read Input with Datalist - ng-change is not fired in IE for AngularJS and https://github.com/angular-ui/bootstrap/issues/3036
And because of styling datalist and select see Is it possible to style the drop-down suggestions when using HTML5 <datalist>?

AngularJS: How to select an material-select item/option in selection

Community good day, I have a simple query, I have a combo box with material-select, it works perfectly, but when I want to click on the clean button, I need the combo to select me the first value that is disabled.
<div class="input-field col s12">
<select class="" id="images" ng-model="image" material-select watch>
<option value="" disabled selected>{{translation.fleet6}}</option>
<option ng-repeat="item in fleetImage.data" value="{{item.name}}" data-icon="img/fleets/{{item.name}}" class="left circle">{{item.name}}</option>
</select>
</div>
I thank you in advance

Here you are. Try it like in this demo fiddle by using a simple "cleanUp" function. While the value of your disabled option is empty you can achieve this by reset your ng-model as an empty string. So your disabled option becomes selected.
View
<div ng-controller="MyCtrl">
<select class="" id="images" ng-model="image" material-select watch>
<option value="" disabled selected>{{translation.fleet6}}</option>
<option ng-repeat="item in fleetImage.data"
value="{{item.name}}"
data-icon="img/fleets/{{item.name}}"
class="left circle">{{item.name}}</option>
</select>
<button ng-click="cleanUp()">
Cleanup
</button>
</div>
AngularJS application
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.image = '';
$scope.translation = {
fleet6: 'some value disabled'
}
$scope.fleetImage = {
data: [{
name: '1'
},{
name: '2'
},{
name: '3'
},{
name: '4'
},{
name: '5'
}
]}
$scope.cleanUp = function () {
$scope.image = '';
}
});

This should work <button ng-click="image=''">click</button>

AngularJS - Dynamically add and remove form fields within a table

I wanna add a couple of form fields, dynamically on a button press and all that fields to be in a table (every field to have his own space something like this: <td>field</td>
This is what I have until now and if I put all the code in the table it doesn't work.
HTML
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<select>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
<input type="text" ng-model="choice.name" name="" placeholder="Enter data">
<input type="text" ng-model="choice.name" name="" placeholder="Enter data 2">
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</fieldset>
<button class="addfields" ng-click="addNewChoice()">Add fields</button>
<div id="choicesDisplay">
{{ choices }}
</div>
</div>
JS
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
Here is a link to JSFiddle:
https://jsfiddle.net/rnnb32rm/1014/

I added table data to your example and i think it works fine?
The only thing you really have to do is replace your fieldset with a tr node and then wrap your inputs in td nodes - and wrap the whole thing in a table node ofcourse.
https://jsfiddle.net/9tk0qpng/1/

Call a function in a select element for filling ngOptions source?

I have a <select> as below:
<div ng-show="myCtrl.name == 'Jack'">
<select ng-model="myCtrl.selectedValue" ng-options="value.id as value.title for value in myCtrl.valueDrpValues">
<option value=""> Select One ...</option>
</select>
</div>
And in myController.js, I have a function which should fill the myCtrl.valueDrpValues. how can I call this function from the select tag? I tested the ng-init, but it didn't work. Also, I called the function exactly from the ng-option and it didn't work, too. (as below:)
ng-options="value.id as value.title for value in definitionCtrl.fillValueDrp()"

You can use ng-init
Call your function there and your array will be populated, for example like so:
<div ng-init="fillValueDrp()">
<div ng-show="myCtrl.name == 'Jack'">
<select ng-model="myCtrl.selectedValue" ng-options="value.id as value.title for value in myCtrl.valueDrpValues">
<option value=""> Select One ...</option>
</select>
</div>
</div>

try this.
var app = angular
.module('MyApp', [
])
.controller('Main', ['$scope', function ($scope) {
var self = this;
self.items = [];
self.name = "Jack";
self.fillValueDrp = function(){
for(var i=0 ;i < 5; i++){
self.items.push({"id":i,"title":i});
}
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl">
<div ng-show="myCtrl.name == 'Jack'" ng-init= "myCtrl.fillValueDrp()">
<select ng-model="myCtrl.selectedValue "ng-options="value.id as value.title for value in myCtrl.items">
<option value=""> Select One ...</option>
</select>
</div>
</div>

Selected option in select box with angularjs

I have an application developed using Codeigniter and AngularJs. I want to set a default item in manual select box, but angular adds an empty undefined item.
<select class="form-control" ng-model="newItem.is_active">
<option value="N" ng-selected="selected"><?php echo $this->lang->line('label_inactive'); ?></option>
<option value="Y"><?php echo $this->lang->line('label_active'); ?></option>
</select>

From documentation ng-selected
If the expression is truthy, then special attribute "selected" will be set on the element
So you can do something like
<option value="Y" ng-selected="newItem.is_active=='Y'"><?php echo $this->lang->line('label_active'); ?></option>
and in controller
$scope.newItem = {
is_active: 'Y'
}
OR
in controller you can set selected value like
$scope.selected = true; //put your selected condition
Demo

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div data-ng-app="myApp" ng-controller="myCtrl" data-ng-init="quantity=1; price=0">
<h2 >BILL</h2>
Product:&nbsp&nbsp&nbsp
<select ng-model="selectedName" ng-options="x.name for x in fruit" >
<options ng-repeat="item for item in fruit">
</options>
</select>
<br><br>
Quantity: <input type="number" ng-model="quantity"><br><br>
Price:&nbsp&nbsp&nbsp&nbsp&nbsp <input type="text"ng-model="selectedName.price ">
<p><b>Cost:</b> {{quantity *selectedName.price }}/-</p>
<p><b>SGST(6%):</b> {{quantity *selectedName.price *6/100}}/-</p>
<p><b>CGST(6%):</b> {{quantity *selectedName.price *6/100}}/-</p>
<p><b>Total With GST:</b> {{quantity * selectedName.price +quantity *selectedName.price*12/100}}/-</p>
<div ng-if="quantity * selectedName.price +quantity *selectedName.price*12/100>=1000">
<p><b>Discount:</b> {{((quantity * selectedName.price+quantity *selectedName.price*12/100)*5/100)}}/-</p>
<p><b>FINAL COST</b> {{quantity * selectedName.price+quantity *selectedName.price*12/100-(quantity * selectedName.price+quantity *selectedName.price*12/100)*5/100}}/-</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.fruit = [{name:"Orange",price:80},
{name:"Pinaple",price:100},
{name:"Grapes",price:120},
{name:"Guava",price:80},
{name:"Mango",price:95},
{name:"Apple",price:180},
{name:"Banana",price:60}];
});
</script>
thank you..
</body>
</html>

Categories