Here I'm fetching data from DataBase using where condition here every textbox showing value but why dropdown not showing values
<select ng-options="I.CountryID as I.CountryName for I in CountryList" ng-model="CountryID">
<option value="{{CountryName}}">{{CountryName}</option>
angular.js
$scope.EditEmp = function (xxx) {
GetAllCountryList(); var ser = Myservice.EditByid(xxx.Id);
ser.then(function (d) {
$scope.Name = xxx.Name;
$scope.CountryID = xxx.CountryID; //This is my Dropdownlist
$('#modalpopup').modal('show')
}
}
Post here what you get in console on inspect element
Anyway, here's a simple example of what you are trying to do, this snippet was taken from angularjs site, hope it will help you.
angular.module('defaultValueSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
availableOptions: [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
],
selectedOption: {id: '3', name: 'Option C'} //This sets the default value of the select in the ui
};
}]);
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="defaultValueSelect" ng-controller="ExampleController">
<form name="myForm">
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
ng-options="option.name for option in data.availableOptions track by option.id"
ng-model="data.selectedOption"></select>
</form>
<hr>
<tt>option = {{data.selectedOption}}</tt><br/>
</div>
</html>
Related
I am using ng-options to display drop-down with options. Suppose I have three options in it for example option1, option2, option3.By default option1 is selected, now if a user selects option2, then $pristine becomes False and again if he selects option1 then from angularjs's prospective $pristine should be false but according to user he has not changed the option.So I was looking for a way to detect this change
Here is the Js fiddle demo
HTML
<div ng-app="myApp">
<div ng-controller="ctrl">
<form name="myForm">
{{myForm.$pristine}}
<select ng-model='list' ng-options='item.name for item in data'>
</select>
</form>
</div>
</div>
JS code
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.data = [{
id: 1,
name: 'test'
}, {
id: 2,
name: 'test1'
}];
$scope.list = $scope.data[0];
$scope.$watch('list', function(o, n) {
if ($scope.list == $scope.data[0])
$scope.myForm.$pristine = true;
})
});
You have add watch on your list model then this can be achieved
That is exactly what ng-change is for.
Usage would be like this (added $index to show you another option):
HTML
<div ng-app="myApp">
<div ng-controller="listController">
<form name="myForm">
<select ng-model="currOption"
ng-options='item.name for item in data'
ng-change="optionChanged(currOption, $index)">
</select>
</form>
</div>
</div>
Controller
angular.module('myApp')
.controller('listController', function($scope) {
$scope.data = [{
id: 1,
name: 'option1'
}, {
id: 2,
name: 'option2'
}, {
id: 3,
name: 'option3'
}];
$scope.optionChanged(option, index) {
// option = the selection the user just made.
// index = the index of the selection in your data. I.E. $scope.data[index]
};
});
controller:
$scope.send_index = function(event, val){
console.log(val);
$scope.variable = 'vm.areas['+val+'].name';
console.log( $scope.variable );
};
and this is in the view:
<select ng-model="vm.areas">
<option ng-repeat="area in vm.areas" ng-value="area" id="{{area}}" ng-click="send_index($event, $index)">{{area.name}}
</select>
<input value="{{variable}}">
where "vm" is my model.
Expression inside of an expression (Angular)
my problem is that i need to have an {{array[]}}, with the index as another expression,
e.g: {{Array[{{val}}]}}.
Already tryed this:
$scope.variable = ''+'vm.areas['+val+'].name'+'';
The problem is in the view, "variable" is shown like an string
(vm.areas[0].name)
and it donst get the valor of that query.
This is NOT the correct way to use ng-model with a <select> element in AngularJS:
<!-- ERRONEOUS
<select ng-model="vm.areas">
<option ng-repeat="area in vm.areas" ng-value="area" id="{{area}}" ng-click="send_index($event, $index)">{{area.name}}
</select>
<input value="{{variable}}">
-->
There is no need to use the ng-click directive. The select directive handles that automatically. The ng-model directive receives or sets the chosen option.
See:
Using ng-repeat to generate select options
Using select with ng-options and setting a default value
angular.module('ngrepeatSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
model: null,
availableOptions: [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
]
};
}]);
<script src="https://unpkg.com/angular/angular.js"></script>
<div ng-app="ngrepeatSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect"> Repeat select: </label>
<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
<option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
</form>
<hr>
<tt>model = {{data.model}}</tt><br/>
</div>
Try data-ng-value instead of value
<input data-ng-value="{{variable}}">
I have a dropdown in Angular. And I want to restrict some values.
I tried with filter as in the below Plunkr.
It works for only one id at a time. But if I want to display two records for example 1 and 2. How to do it ?
Plunkr:
http://plnkr.co/edit/CumFFs9dMMb4krosKKZC?p=preview
Javascript
(function(angular) {
'use strict';
angular.module('ngrepeatSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.filterCriteria ;
$scope.data = {
repeatSelect: null,
availableOptions: [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
],
};
}]);
})(window.angular);
HMTL
<body ng-app="ngrepeatSelect">
<div ng-controller="ExampleController">
<form name="myForm">
Filter <input type="text" ng-model="filterCriteria"> <br><br>
<label for="repeatSelect"> Repeat select: </label>
<select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect">
<option ng-repeat="option in data.availableOptions | filter : filterCriteria" value="{{option.id}}">{{option.name}}</option>
</select>
</form>
<hr>
<tt>repeatSelect = {{data.repeatSelect}}</tt><br/>
</div>
</body>
Update:-
I am trying to achieve to reduce some of the available drop down values from the original big list to a small list. ( Side note : I just need a single select and not multi-select feature.)
i'm trying to change the sprangular variant selection(using button) to selecet option,
but i got stuck using angular directive to change selected value (i'm tried ng-change, ng-selected), i think my mistake in directives property,
this my wrong HTML code :
<select class="form-control select-styled"ng-change="selectValue(item.value)" ng-model="item.value">
<option ng-repeat="item in option.values">{{item.value.presentation}}</option></select>
i'm trying to use ng-click like this
<select class="form-control select-styled">
<option ng-repeat="item in option.values" ng-click="selectValue(item.value)">{{item.value.presentation}}</option>
but it's only working on Firefox, not on safari,chrome.
this is the variantSelection.coffe code
'use strict'
Sprangular.directive 'variantSelection', ->
restrict: 'E'
templateUrl: 'directives/variant_selection.html'
scope:
product: '='
variant: '='
class: '='
change: '&'
controller: ($scope) ->
$scope.values = {}
$scope.$watch 'variant', (newVariant, oldVariant)->
$scope.change({oldVariant: oldVariant, newVariant: newVariant}) if newVariant != oldVariant
$scope.isValueSelected = (value) ->
$scope.values[value.option_type_id]?.id == value.id
$scope.isValueAvailable = (value) ->
$scope.product.availableValues(_.values($scope.values))
$scope.selectValue = (value) ->
$scope.values[value.option_type_id] = value
$scope.variant = $scope.product.variantForValues(_.values($scope.values))
link: (scope, element, attrs) ->
scope.values = {}
if scope.variant
for value in scope.variant.option_values
scope.values[value.option_type_id] = value
In angular document you can see as like a example from the section Using ngRepeat to generate select options
HTML:
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect"> Repeat select: </label>
<select name="repeatSelect" ng-change="selectValue(data.repeatSelect)" id="repeatSelect" ng-model="data.repeatSelect">
<option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
</form>
<hr>
<tt>repeatSelect = {{data.repeatSelect}}</tt><br/>
</div>
JS:
angular.module('ngrepeatSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
repeatSelect: null,
availableOptions: [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
],
};
}]);
// Code goes here
angular.module('ngrepeatSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
repeatSelect: null,
availableOptions: [{
id: '1',
name: 'Option A'
}, {
id: '2',
name: 'Option B'
}, {
id: '3',
name: 'Option C'
}],
};
$scope.selectValue = function(value) {
console.log(value);
alert(value);
};
}]);
<!DOCTYPE html>
<html ng-app="ngrepeatSelect">
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect"> Repeat select: </label>
<select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect" ng-change="selectValue(data.repeatSelect)">
<option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
</form>
<hr />
<tt>repeatSelect = {{data.repeatSelect}}</tt>
<br />
</div>
</body>
</html>
here is the link where they can try to solve this problem. Thanks.
This code working only firefox and IE
<option ng-click="this.$parent.selectValue(data.repeatSelect)" ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
(the problem in sprangular while change variant selection into a dropdown)
using an ng-model and ng-change...
and the problem is the json not an objct
like this code :
<select class="form-control select-styled" ng-model="item" ng-change="selectValue(item)">
<option ng-repeat="item in option.values" value="{{ item.value }}">{{item.value.presentation}}</option></select>
and editing the variantSelection.coffee
$scope.selectValue = (value) ->
obj = JSON.parse(value) //add this one into selectValue function
$scope.values[obj.option_type_id] = obj
$scope.variant = $scope.product.variantForValues(_.values($scope.values))
and selected select option will work in every browser..
hope this usefull for others who have the same problem with me..
sorry #RIPenglish
try this
<select class="form-control select-styled">
<option ng-repeat="item in option.values" ng-click="selectValue(item.value)">{{item.value.presentation}}</option>
ngRepeat is a directive.
So it has own $score.
I try to do TODO list using Angular.js
I have function addTask, but it dosen't work. I try to give it project and than get array of tasks. In Chrome I see this mistake "Cannot read property 'tasks' of undefined"
This is my app.js
var app = angular.module('toDoList', ['ngDialog']);
app.controller('MainCtrl', [
'$scope',
'$rootScope',
'ngDialog',
function($scope, $rootScope, ngDialog){
$scope.test = 'Hello world!';
$scope.projects = [
{id: '1', title: 'For Home', tasks: [ {title: 'task 1', done:false }, {title: 'task 2', done: false }]},
{id: '2', title: 'For Work', tasks: [ {title: 'task 1', done:false }, {title: 'task 2', done: false }]}
];
$scope.addProject = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.projects.push({
title: $scope.title
});
};
$scope.addTask = function(project){
$scope.project.tasks.push({
title: $scope.tasktitle, done: false
});
}]);
This is my html code
<body ng-app="toDoList" ng-controller="MainCtrl">
<div class="project" ng-repeat="project in projects">
<span class="title">{{project.title}}</span>
<form name="frm" ng-submit="addTask(project)">
<input
type="text"
class="form-control"
placeholder="Start to type task"
ng-model="tasktitle">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Add Task</button>
</span>
</form>
<ul class="todo-list">
<li ng-repeat="task in project.tasks">
<input type="checkbox" ng-model="task.done">
<span ng-class="{done:task.done}">{{task.title}}</span>
</li>
</ul>
</div>
</body>
How can I push my data about task?
This is doesn't work:
$scope.addTask = function(project){
$scope.project.tasks.push({
title: $scope.tasktitle, done: false
});
};
First and foremost, you're missing an 's' in $scope.project.tasks.push. It should be projects, so as to match up with the scope variable.
Second, you're not actually choosing a project to push to. $scope.projects is an Array. You would need to choose an index to push to. Here's what I think you're going for:
HTML
<form name="frm" ng-submit="addTask(project.id, tasktitle)">
Javascript
$scope.addTask = function(id, task){
$scope.projects[id].tasks.push({
title: task
, done: false
});
};
EDIT: Working codepen at: codepen.io/Pangolin-/pen/YPVwye – Pangolin
I could fix this, but i don't know is it right?
HTML
<form name="frm" ng-submit="addTask(project.tasks, tasktitle)" class="input-group">
Javascript
$scope.addTask = function(project, value){
project.push({
title: value
});