Ive run into a little problem and I can't seem figure out where ive went wrong.
I am trying to change an href value outside of the select field when it changes. Console is logging properly but href is not changing.
**I would like the href value to change and contain text + an angularjs data like so "http://test.com/{{ch.names}}"
here is my select:
<select class="form-control3" name="ch" id="ch">
<optgroup label="Ch">
<option value="x6">x6</option>
<option value="P4">P4</option>
</optgroup>
</select>
this is the href attempting to change:
{{ch.names}}
and here is my jquery:
<script type="text/javascript">
$(document).ready(function() {
$("#ch").change(function() {
if($(this).val() == 'P4') {
$(".a-class").attr("href", "http://test.com/{{ch.names}}");
console.log(".a-class");
}
else {
$(".a-class").attr("href", "http://test2.com/{{ch.names}}");
console.log(".a-class1");
}
});
});
</script>
when the values are changed it will log the class or class1 fitting the if statement but my href does not change where have I went wrong?
It would be a lot cleaner to simply do this with Angular:
<div ng-app="TestApp">
<div ng-controller="TestController">
<select ng-model="selected" ng-options="option for option in options"></select>
<a ng-href="http://test.com/{{selected}}">Selected: {{selected}}</a>
</div>
</div>
Controller
var myApp = angular.module('TestApp',[]);
myApp.controller('TestController', ['$scope', function($scope) {
$scope.options = ['x6', 'P4'];
$scope.selected = 'P4';
}]);
Fiddle: here
EDIT
From your comment, it sounds like you want to switch the whole URL to something else depending on the selection. You could save that data as a property in an array of objects, like this:
myApp.controller('TestController', ['$scope', function($scope) {
$scope.options = [
{
title: 'x6',
urlPrefix: 'http://test1.com/'
}, {
title: 'P4',
urlPrefix: 'http://test2.com/'
}];
$scope.selected = $scope.options[1];
}]);
You'll need to change the HTML a little:
<select ng-model="selected" ng-options="option.title for option in options"></select>
<a ng-href="{{selected.urlPrefix}}{{selected.title}}">Selected: {{selected.title}}</a>
Updated fiddle: here
The angular way to do this is not to use jQuery at all. You create an app and a controller, bind the values and let angular take care of it. Plunkr
Html:
<body ng-app="TestApp">
<div ng-controller="TestCtrl">
<select class="form-control3" name="ch" id="ch" ng-model="href_value" ng-options="value.data group by value.group for value in opt_values"></select>
{{href_value.data}}
</div>
</body>
Javascript:
angular.module('TestApp', [])
.controller('TestCtrl', ['$scope', function($scope) {
$scope.opt_values = [
{data: 'x6', url: "http://test.com/", group: "Ch"},
{data: 'P4', url: "http://test2.com/", group: "Ch"}];
}]);
Related
I am trying to implement a multiselect dropdown in AngularJS and trying to store the values in an list in my JS file. However I am unable to handle the event for selecting multiple values.
I have used ng-change but this handles only one click. Selecting multiple values using CTRL + arrow key is not handled. My list is dynamically generated.
Please suggest ways to handle it using Javascript/AngularJS
<div>
<select multiple class="form-control drop-down" name="abclist" id="users" ng-model="databaseUser" ng-options="databaseUser.username for databaseUser in databaseUsers" ng-change="ctrl.onchange()" required>
<option value="" >SELECT USER VALUE</option>
</select>
</div>
(function () {
'use strict';
angular.module(userdetails.module).controller('UserController', UserController);
UserController.$inject = ['$scope', '$rootScope','$http', 'dData', '$location', '$uibModal'];
function AdminController($scope, $rootScope, $http, dData, $location, $uibModal) {
function onchange(){
}
You don't need to catch the onChange event to do that, the ng-model attribute will do the work for you.
HTML
<div ng-app="myModule">
<div ng-controller="myController as ctrl">
<div>
<p>Selected users: {{ctrl.selectedUsers}}</p>
<select multiple
id="users"
ng-model="ctrl.selectedUsers"
ng-options="user as user.label for user in ctrl.users track by user.id">
</select>
</div>
</div>
</div>
Javascript
var module = angular.module("myModule", []);
module.controller("myController", function() {
var $ctrl = this;
$ctrl.users = [{id:1, label:'eyp'}, {id:2, label:'jrt'}];
$ctrl.selectedUsers = null;
});
Here you have a JSFiddle test to show you how it works.
When I reload the page, the first option is always empty. I want the option containing text Any Make to be the default select option. Here is the code for my view:
<select class="form-control" id="make" name="make" ng-init="Any Make" ng-model="makeSelected" ng-change="makeChanged()">
<option value="0" selected="selected"> Any Make</option>
<option ng-repeat="obj in makeData" value="{{obj.make_id}}"> {{ obj.make_name | uppercase }} </option>
</select>
here is my controller code:
.controller("homeController", function ($scope, makeData, $http) {
$scope.makeData = makeData;
$scope.makeChanged = function () {
$http({
method: "GET",
url: "homeService.asmx/GetModelById"})
.then(function (response) {
$scope.modelData = response.data;
})
}
})
just remove ng-init and in your model give default value
$scope.makeSelected = 0;
Here is a running fiddle for your code Click here
Fiddle for code with dynamic data Click here
If you aren't going to use ngOptions, at least get rid of that ng-init since it isn't a function, and in the controller function set $scope.makeSelected = 0;
Then you can remove the selected="selected" on that initial option, since the angularJS code will be handling what is selected.
See a demonstration below:
angular.module('app', [])
.value('makeData', [{
"make_id": 1,
"make_name": "cat"
},{
"make_id": 2,
"make_name": "dog"
},{
"make_id": 6,
"make_name": "monkey"
}])
.controller("homeController", function($scope, makeData, $http) {
//initialize the value associated with ng-model on the select list
$scope.makeSelected = 0;
$scope.makeData = makeData;
$scope.makeChanged = function() {
console.log('makeChanged');
//$http() request removed because we don't have access outside this domain for AJAX requests.
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="homeController">
<select class="form-control" id="make" name="make" ng-model="makeSelected" ng-change="makeChanged()">
<option value="0"> Any Make</option>
<option ng-repeat="obj in makeData" value="{{obj.make_id}}"> {{ obj.make_name | uppercase }} </option>
</select>
<div>makeSelected: {{makeSelected}}</div>
</div>
Here is my JSON array:
array=[ {id:1, name:'A'} , {id:2, name:'B'} ]
And in ng-model I am setting value which may be string like
modelValue='1'
I had ng-option
ng-option="option.id as option.name for option in array"
ng-model="modelValue"
But it is not showing selected value of ng-model in select
And in ng-model I am setting value which may be string like
You should provide the same primitive or object type to your $scope.modelValue as of id. This is the preferred way.
If only the JSON array is being fetched dynamically AND type consistency is not guaranteed then you can apply a function to convert it to the type that is set to $scope.modelValue
In HTML
<select ng-model="modelValue" ng-options="getId(option.id) as option.name for option in myarray">
</select>
In Controller
$scope.modelValue='1';
$scope.myarray=[ {id:1, name:'A'} , {id:2, name:'B'} ];
$scope.getId = function(id)
{
if(typeof $scope.modelValue == "string")
return String(id);
else if(typeof $scope.modelValue == "number")
return parseInt(id);
}
COMPLETE EXAMPLE
Also see this answer
Here is a working JSFiddle example based on your description: http://jsfiddle.net/9pLdgmm1/1/
You should use ng-options instead of ng-option
<select ng-options="p.name for p in people"
ng-model="selectedPerson">
</select>
You should take ng-options instead of ng-option, als you should take integer itself instead of string..
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="modelValue" ng-options="option.id as option.name for option in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [ {id:1, name:'A'} , {id:2, name:'B'} ]
$scope.modelValue = 1;
});
</script>
<p>This example shows how to fill a dropdown list using the ng-options directive.</p>
</body>
</html>
Please run the above snippet
Here is a Working DEMO
This should not be selected, because of all id is in numbers. If you want to make it select, then parse your $scope.modelValue to numbers like this.
$scope.modelValue= parseInt("1");
Also change your ng-options instead of ng-option
You have a syntax error in ng-options:
<select ng-options="option.name for option in array" ng-model="modelValue"></select>
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope) {
$scope.array = [{
id: 1,
name: 'A'
}, {
id: 2,
name: 'B'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
<select ng-options="option.name for option in array" ng-model="modelValue"></select>
modelValue is: {{modelValue}}
</fieldset>
</div>
Update: Solved! Please see my answer below.
I am trying to display a different image with each select option in Angular. As a user clicks on each option in a menu, a different image appears next to the menu. All of this is before the form is submitted. Basically trying to do what is done here in this fiddle, but in Angular: http://jsfiddle.net/treyh/xf2pq/
html:
Current image: {{myCar.url}}
<br>
<select ng-model="myCar" class="form-control">
<option value="">Choose a car...</option>
<option ng-repeat="car in cars" value="{{car}}" data-image = "{{car.url}}">{{car.label}}</option>
</select>
in the js file, inside the controller:
$scope.cars = [
{url: 'Volvo.png', label: 'Volvo'},
{url: 'Benz.png', label: 'Benz'},
{url: 'JohnDeer.png', label: 'John Deer'},
{url: 'BMW.png', label: 'BMW'},
];
I have figured out how to do this using ng-repeat and $Scope.
in the js file, inside the controller:
$scope.cars = ['Volvo', 'Benz', 'Toyota'];
$scope.myCar = "";
var carURL = {
Volvo: 'volvo.png',
Benz: 'benz.png',
Toyota: 'toyota.png'
};
$scope.getCarURL = function(brand) {
return carURL[brand];
}
and in the html:
<select ng-model="myCar">
<option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
</select>
<img ng-src="{{getCarUrl(myCar)}}">
Select inputs in Angular are a bit confusing at first, but here is one way to set it up.
angular
.module('app',[])
.controller('AppCtrl',AppCtrl);
function AppCtrl() {
var vm = this;
vm.car_image = null;
vm.cars = [
{
'url':'audi.jpg',
'name':'Audi'
},
{
'url':'bmw.jpg',
'name':'BMW'
}
]
}
<div ng-controller="AppCtrl as ctrl">
<select ng-model="ctrl.car_image" ng-options="c.url as c.name for c in ctrl.cars" class="form-control"></select>
<hr>
<img ng-src="images/{{ctrl.car_image}}" ng-show="ctrl.car_image">
</div>
Using ng-src will prevent a 404 error initially when the page loads. So when you select the option you need, the ng-model from the select input is applied to the image tag.
What is the simplest way to add some commands to the end of the Angular select box?
E.g. I want to get a list like this:
Cat
Dog
Octopus
Browse…
All items except Browse are some data / ng-options, but Browse is a command and always present. It should not be actually selectable as an item, and should call a handler instead.
I suppose I could put this command into the list bound to ng-options and manage it as a special case, but that feels like a hack. Is there a proper approach to this?
Take a look at this, here when you select the browse it will open a dialog box
Working Demo
html
<form ng-app="app" ng-controller="Ctrl" ng-init="item = this">
<select ng-model="animal" ng-change="clickToOpen()" ng-init="animal='select'">
<option value="select">Please select an animal</option>
<option ng-repeat="animal in animalsGroup">{{animal.name}}
</option>
<option value="Browse..">Browse..</option>
</select>
<script type="text/ng-template" id="templateId">
<h1>Template heading</h1>
<p>Content goes here</p>
<center><input type="button" value="OK" ng-click="closeThisDialog(this)"/></center>
</script>
</form>
script
var app = angular.module("app", ['ngDialog']);
app.controller('Ctrl', function ($scope, ngDialog) {
$scope.animalsGroup = [
{name:'Cat'},
{name:'Dog'},
{name:'Octopus'}
];
// select initial value
$scope.animal = $scope.animalsGroup[0];
//
$scope.clickToOpen = function () {
if ($scope.animal === 'Browse..')
{
$scope.animal = "select";
ngDialog.open({
template: 'templateId',
className: 'ngdialog-theme-plain',
showClose: false,
});
}
else
{
// other than 'Browse'
}
};
$scope.closeThisDialog = function (dialog) {
dialog.close();
}
});
If i understood corectly you want to handle the browse option differently .
Script :
$scope.colors = [
{name:'Cat'},
{name:'Dog'},
{name:'Octopus'},
{name:'Browse'}
];
$scope.handleChange = function(){
if ($scope.myColor.name === 'Browse'){
// your implementation
}
}
Html :
<select ng-model="myColor" ng-options="color.name for color in colors" ng-change="handleChange"></select>