I set the default value in a dropdown, but i see always the first option selected, but if i click the dropdown the value that i want is set.
CONTROLLER
tantoSvagoApp.controller("ricercaAttivita", function ($scope, $http) {
$scope.selectedRegione = regione;
});
HTML
<select class="trip dark" ng-model="selectedRegione" ng-options="regione.nome as regione.nome for regione in regioni.regionSelector">
<option value="">TUTTE</option>
</select>
You can have a look at this code
<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
<select ng-options="regione.nome as regione.nome for regione in regioni.regionSelector"
ng-model="selectedRegione"></select>
{{ selectedRegione }}
</fieldset>
</div>
Controller
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
$scope.selectedRegione = 'Mike';
$scope.regioni = {
'regionSelector':[
{ id: 1, nome: 'John'},
{ id: 2, nome: 'Rocky'},
{ id: 3, nome: 'Mike'},
{ id: 4, nome: 'Ben' }
]
};
});
The <option> is created dynamically and the value for the dropdown is pre-selected by $scope.selectedRegione = 'Mike'; which reference the nome: 'Mike' of the $scope.regioni.regionSelector array.
For simplicity and work around here is the link to JSFIDDLE
Related
I am creating a <select/> with a default <option/> string but it relies on a specific expression
For example, an empty data set would yield a "No Data yet" default option while when there is data available the default option should be "Select a Data"
Angular only allows one static option in the html page.
Make the option description conditional (by moving the description to a function):
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope) {
$scope.people = [{
first: 'John', last: 'Rambo'
}, {
first: 'Rocky', last: 'Balboa'
}, {
first: 'John', last: 'Kimble'
}, {
first: 'Ben', last: 'Richards'
}];
$scope.optionText = function() {
if($scope.people.length > 0) return 'Select a person';
else return 'No person found';
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="FirstCtrl">
<select ng-options="p.first + ' ' + p.last for p in people" ng-model="selectedPerson">
<option value="">{{optionText()}}</option>
</select>
<button ng-click="people = []">Clean data</button>
</div>
Following Scott Allen's first code (simple) sample, after drop-down entry changes the wired ng-model is not refreshing this
{{engineer.currentActivity}}
Browser: FF 50.1.0
Angular: 1.5.9
jQuery: 1.7
HTML:
<div ng-controller="EngineeringController">
{{engineer.name}} is currently : {{engineer.currentActivity}}
<div>
choose an activity:
<select id="agDDLClient" ng-model="EngineeringController.currentActivity" ng-options ="act for act in activities">
</select>
</div>
<input type="button" ng-click="what()" value="check" />
</div>
JS:
var aIS = angular.module("app", []);
aIS.controller("EngineeringController", function($scope, $http)
{
$scope.engineer = {
name: "Dani",
currentActivity: "Fixing bugs"
};
$scope.activities =
[
"Writing code",
"Testing code",
"Fixing bugs",
"Dancing"
];
$scope.what = function(){ alert($scope.engineer.currentActivity);}
});
ng-model value should be engineer.currentActivity instead of EngineeringController.currentActivity as you are trying to alert the $scope.engineer.currentActivity inside what() function.
Working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('EngineeringController',function($scope) {
$scope.engineer = {
name: "Dani",
currentActivity: "Fixing bugs"
};
$scope.activities = [
"Writing code",
"Testing code",
"Fixing bugs",
"Dancing"
];
$scope.what = function() {
alert($scope.engineer.currentActivity);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="EngineeringController">
{{engineer.name}} is currently : {{engineer.currentActivity}}
<div>
choose an activity:
<select id="agDDLClient" ng-model="engineer.currentActivity" ng-options ="act for act in activities">
</select>
</div>
<input type="button" ng-click="what()" value="check" />
</div>
Change to ng-model="engineer.currentActivity" instead of ng-model="EngineeringController.currentActivity"
and also your controller code should be follow this
var aIS = angular.module("app", []);
aIS.controller("EngineeringController", function($scope, $http)
{
$scope.engineer = {
name: "Dani",
currentActivity: "Fixing bugs"
$scope.activities =
[
"Writing code",
"Testing code",
"Fixing bugs",
"Dancing"
];
$scope.what = function(){ alert($scope.engineer.currentActivity);}
});
I'm trying to update the options after 3 seconds.
In my HTML I have the code that generates the options.
<select
ng-model="selectedOperator"
ng-options="operator as operator.name for operator in operators">
</select>
And in the same HTML, I have
$(function() {
$('select').material_select();
});
that initializes the Materialize dropdown.
In my Javascript:
.controller('MainCtrl', function ($scope, $timeout) {
// initialize old(first) values
$scope.operators = [
{ value: 1, name: 'Old-One' },
{ value: 2, name: 'Old-Two' }
];
$scope.selectedOperator = null; // no default selected value
// after three seconds, replace the old value with new one.
$timeout(function() {
$scope.operators = [{ value: 10, name: 'New Awesome' }];
// reinitialize the materialize select.
$('select').material_select();
}, 3000);
});
However it's not being updated, it's still generating the old value.
In the HTML, the value of {{ operators }} is the new value.
I'm new to Angular, any help would be greatly appreciated.
Cheers
Update: I'm like 70% sure they don't play well with each other, made a temporary fix by replacing select with radio button.
<select name="repeatSelect" id="repeatSelect" ng-model="selectedOperator">
<option ng-repeat="operator in operators" value="{{operator.value}}">{{operator.name}}</option>
</select>
DOC
This is sample example you can change this values later, its working fine.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
$('select').material_select();
});
angular.module('myApp', []).controller('namesCtrl', function($scope, $timeout) {
$scope.operators = [
{ value: 1, name: 'Old-One' },
{ value: 2, name: 'Old-Two' }
];
$scope.selectedOperator = null; // no default selected value
// after three seconds, replace the old value with new one.
$timeout(function() {
$scope.operators = [{ value: 10, name: 'New Awesome' }];
// reinitialize the materialize select.
$('select').material_select();
}, 3000);
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<h1>Angular JS Application</h1>
<select ng-model="selectedOperator" ng-options="operator as operator.name for operator in operators">
</select>
</div>
</body>
All I did was modify their official Async Search demo (it fits my use case) to make use of "controller as", and getting weird behaviour as a result. Codepen is here. Am I missing anything?
Here's the relevant bits of code from the above link:
JS:
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('SelectAsyncController', function($timeout, $scope) {
var vm = this;
vm.user = null;
vm.users = null;
vm.loadUsers = function() {
return $timeout(function() {
vm.users = vm.users || [
{ id: 1, name: 'Scooby Doo' },
{ id: 2, name: 'Shaggy Rodgers' },
{ id: 3, name: 'Fred Jones' }
];
}, 650);
};
});
Markup:
<div ng-controller="SelectAsyncController as vm" layout="column" ng-app="MyApp">
<md-select placeholder="Assign to user"
ng-model="vm.user"
md-on-open="vm.loadUsers()">
<md-option ng-value="vm.user"
ng-repeat="user in vm.users">{{user.name}}</md-option>
</md-select>
<p>Assigned to: {{ vm.user ? vm.user.name : 'No one yet' }}</p>
</div>
You should change ng-value to "user".
<md-option ng-value="user" ng-repeat="user in vm.users">{{user.name}}</md-option>
Here is the working Codepen.
I have few filters in view
<tr ng-repeat="x in list | filter:search| offset:currentPage*pageSize| limitTo:pageSize ">
In my project to achieve good result, i have to make this filtering in controller not in view
i know the basic syntax $filter('filter')('x','x') but i don't know how to make chain of filters in controller, so everything will work as in my example from template.
I found some solution, now just with one filter, but should work with many ;)
$scope.data = data; //my geojson from factory//
$scope.geojson = {}; //i have to make empty object to extend it scope later with data, it is solution i found for leaflet //
$scope.geojson.data = [];
$scope.FilteredGeojson = function() {
var result = $scope.data;
if ($scope.data) {
result = $filter('limitTo')(result,10);
$scope.geojson.data = result;
console.log('success');
}
return result;
};
and i use this function in ng-repeat works fine, but i have to check it with few filters.
You can just re-filter what you get returned from your first filter. So on and so forth.
var filtered;
filtered = $filter('filter')($scope.list, {name: $scope.filterParams.nameSearch});
filtered = $filter('orderBy')(filtered, $scope.filterParams.order);
Below plunkr demonstrates the above.
http://plnkr.co/edit/Ej1O36aOrHoNdTMxH2vH?p=preview
In addition to explicitly applying filters to the result of the previous one you could also build an object that will chain multiple filters together.
Controller
angular.module('Demo', []);
angular.module('Demo')
.controller('DemoCtrl', function($scope, $filter) {
$scope.order = 'calories';
$scope.filteredFruits = $scope.fruits = [{ name: 'Apple', calories: 80 }, { name: 'Grapes', calories: 100 }, { name: 'Lemon', calories: 25 }, { name: 'Lime', calories: 20 }, { name: 'Peach', calories: 85 }, { name: 'Orange', calories: 75 }, { name: 'Strawberry', calories: 65 }];
$scope.filterFruits = function(){
var chain = new filterChain($scope.fruits);
$scope.filteredFruits = chain
.applyFilter('filter', [{ name: $scope.filter }])
.applyFilter('orderBy', [ $scope.order ])
.value;
};
function filterChain(value) {
this.value = value;
}
filterChain.prototype.applyFilter = function(filterName, args) {
args.unshift(this.value);
this.value = $filter(filterName).apply(undefined, args)
return this;
};
});
View
<!doctype html>
<html ng-app="Demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DemoCtrl">
<input type="text" ng-model="filter" ng-change="filterFruits()" placeholder="Filter Fruits" />
<select ng-model="order">
<option value="name">name</option>
<option value="calories">calories</option>
</select>
<div ng-repeat="fruit in filteredFruits">
<strong>Name:</strong> {{fruit.name}}
<strong>Calories:</strong> {{fruit.calories}}
</div>
</div>
</body>
</html>
This is a typical case for FP libraries like lodash or Ramda. Make sure your common data is applied as last arg to each filter. (in this case columns)
$scope.columnDefs = _.compose(
$filter('filter3'),
$filter('filter2'),
$filter('filter1')
)($scope.columns)
or with extra args
$scope.columnDefs = _.compose(
$filter('filter3').bind(null, optionalArg1, optionalArg2),
$filter('filter2').bind(null, optionalArg1),
$filter('filter1')
)($scope.columns)