I'm pretty new into angular and already got my first problem. I looked for a solution on stackoverflow but no one got the same scenario as me. I want to set a default text in my "select box". Just something like "Choose your car". But I don't know how to insert this default text. I tried to solve it in the way i learned it in HTML. But it didn't work because I don't have any tags.
p.s. I also tried a little bit of MVC. I think it isn't correct at all, but ignore it for this post.
That would be my code:
View -> index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedCar" ng-options="x.marke for x in cars">
</select>
<h1>You selected: {{selectedCar.marke}}</h1>
<h1>The color is: {{selectedCar.farbe}}</h1>
</div>
<script src="./JS/myApp.js"></script>
<script src="./JS/myCtrl.js"></script>
</body>
</html>
Model -> myApp.js
var app = angular.module("myApp", []);
Controll -> myCtrl.js
app.controller("myCtrl", function($scope){
$scope.cars = [
{marke: "Lamborghini", farbe: "Gelb"},
{marke: "Bugatti", farbe: "Schwarz"},
{marke: "BMW", farbe: "Blau"},
{marke: "VW", farbe: "Grau"}
];
})
Thanks for any help
Just add another option like below,
<select ng-model="selectedCar" ng-options="x.marke for x in cars">
<option value="">-- Choose your car --</option>
</select>
DEMO
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.cars = [
{marke: "Lamborghini", farbe: "Gelb"},
{marke: "Bugatti", farbe: "Schwarz"},
{marke: "BMW", farbe: "Blau"},
{marke: "VW", farbe: "Grau"}
];
})
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedCar" ng-options="x.marke for x in cars">
<option value="">-- Choose your car --</option>
</select>
<h1>You selected: {{selectedCar.marke}}</h1>
<h1>The color is: {{selectedCar.farbe}}</h1>
</div>
</body>
</html>
You can manually add an default option like so:
<select ng-model="selectedCar" ng-options="x.marke for x in cars">
<option value="">Please select one</option>
</select>
Related
I'm using the Bootstrap-Multiselect function; I want to unselect an option when I click on "x".
This is a simple example of what I'm looking for.
$(document).on("click", '#remove', function(a) {
var tag = this.getAttribute("value");
$('#tags').find('[value=' + tag + ']').prop('selected', false);
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id='Tags' data-style="btn-primary" multiple data-max-options="2">
<option value='Php' selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div value='Php' id='remove'>x</div>
</div>
</body>
</html>
This could be achieved by unselecting all then getting the selected values and remove the target tag from them and reselect the rest of them then finally refresh the select :
$(document).on("click", '#remove', function(a) {
var tag = this.getAttribute("value");
var values = $('#tags').val();
if(values){
$('#tags').selectpicker('deselectAll');
$('#tags').selectpicker('val', values.filter(function(e) {return e !== tag }));
$('#tags').selectpicker('refresh');
}
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id='tags' data-style="btn-primary" multiple data-max-options="2">
<option value='Php' selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div value='Php' id='remove'>x</div>
</div>
</body>
</html>
I think that you should not use the value attribute in a div element, since it was not designed the job you are trying to do (see here). You can use a data-tag="php" for example, and when writing html I think is best to use " instead of ' too, but the browser do the trick.
In the select element, you wrote the id tags with the first letter in "caps lock"
and then in the javascript code you use #tags, see:
<select class="selectpicker" id='Tags' data-style="btn-primary" multiple data-max-options="2">
$('#tags').find('[value=' + tag + ']').prop('selected', false);
After that, you just need to remove the selected element from the array and set the values again, see a working example:
jQuery(document).ready(function($) {
$(document).on("click", '#remove', function(a) {
var removed = $(this).data('value')
var values = $("#tags").val()
var index = values.indexOf(removed)
if (index != -1) {
values.splice(index, 1)
$('#tags').selectpicker('val', values);
}
});
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id="tags" data-style="btn-primary" multiple data-max-options="2">
<option value="Php" selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div data-value="Php" id="remove">x</div>
</div>
</body>
</html>
This maybe the simplest but for me I have no idea; their website is also not clear.
I have updated my bower.json file to use version 1.0.3 of the Iron Elements, imported the iron-dropdown elements but nothing shows when I have this:
<iron-dropdown>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</iron-dropdown>
Am I missing something?
Edit:
This also shows nothing:
<iron-dropdown horizontal-align="right" vertical-align="top">
<div class="dropdown-content">Hello!</div>
</iron-dropdown>
If it helps, I'm using Polymer Starter Kit.
Guess I'll answer this myself as this is with less code. Apparently you need an id on the <iron-dropdown> itself then calling the function show shows the hidden content:
<button on-click="show">Click me</button>
<iron-dropdown id="showMenu" horizontal-align="right" vertical-align="top">
<div class="dropdown-content">Hello!</div>
</iron-dropdown>
<script>
show: function() {
this.$.showMenu.toggle();
}
</script>
Aren't you missing the dropdown-content div ?
Check the demo tab and right click on the Basic dropdown to see it's structure.. Also from the doc page :
<iron-dropdown horizontal-align="right" vertical-align="top">
<div class="dropdown-content">Hello!</div>
</iron-dropdown>
This is the code from their demo Basic Button.
<button class="dropdown-trigger">Basic</button>
<div class="style-scope iron-dropdown" id="contentWrapper">
<ul class="dropdown-content">
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
<li>delta</li>
<li>epsilon</li>
</ul>
</div>
The dropdown element initial display status is hidden.
So you need to provide a way to open it, i.e. with a related button.
I've created a sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/iron-dropdown/iron-dropdown.html">
<title>Dropdown Polymer minimal sample</title>
</head>
<body>
<paper-button>flat button</paper-button>
<iron-dropdown horizontal-align="right" vertical-align="top">
<div class="dropdown-content">This is the content inside the dropdown!</div>
</iron-dropdown>
<script>
var button= document.querySelector('paper-button');
button.addEventListener('click', function(e) {
var dropdown = document.querySelector('iron-dropdown');
dropdown.open();
});
window.addEventListener('WebComponentsReady', function(e) {
var dropdown = document.querySelector('iron-dropdown');
dropdown.close();
});
</script>
I have the following controller.js
var eclassApp = angular.module('eclassApp', []);
eclassApp.controller('StudentsListCtrl', ['$scope','$http',
function($scope, $http){
$http.get('/static/js/students.json').success(function(data){
$scope.students = data;
});
$scope.orderProp = 'last_name';
}]);
My html is the following
<!DOCTYPE html>
<html lang="en" ng-app="eclassApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="../static/js/controller.js" type="application/javascript"></script>
</head>
<body ng-controller="StudentsListCtrl">
<h3>Class B3</h3>
<div class="row">
<div class="col-xs-3">
Search: <input type="text" ng-model="query">
</div>
<div class="col-xs-5">
<select ng-model="orderProp">
<option value="last_name">Alphabetical</option>
<option value="age">Youngest</option>
<option value="-age">Oldes</option>
</select>
</div>
</div>
<div class="row">
<ul>
<li ng-repeat="student in students | filter:query | orderBy:orderProp">
<p>{{student.name}}</p>
<p>{{student.last_name}}</p>
</li>
</ul>
</div>
</body>
</html>
my json file gets accessed normally (from chrome's developer's console) but still I get the following errors.
SyntaxError: Unexpected token ]
at Object.parse (native)
at pc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:14:208)
at Zb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:76:379)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:77:237
at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:7:302)
at Zc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:77:219)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:78:349)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:112:20
at l.$get.l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:125:305)
at l.$get.l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:122:398)
Am I missing a tokken that I can't see?
EDIT: I'm sorry..As a python developer I'm used in putting commas after last element in an array, something json arrays don't work well :). I had forgotten a comma on my json file. Removed it and works great
Try this -
eclassApp.controller('StudentsListCtrl', function($scope, $http){
$http.get('static/js/students.json').success(function(data){
$scope.students = data;
});
$scope.orderProp = 'last_name';
});
Here is a simple form which uses AngularJS.
In FireFox (30.0) and IE (11.0.9600.17207), if I choose "Yes, No, No" in drop-down boxed, is shows "true, false, false" as I expect.
In Chrome (36.0.1985.125 m) it shows "true, true, true".
Does anybody have any ideas what I'm doing wrong?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="testApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var testApp = angular.module( 'testApp', [] );
testApp.controller( 'Ctl1', [
'$scope',
function ( $scope ) {
$scope.questions = [{ id: 1, value: null }, { id: 2, value: null }, { id: 3, value: null }];
$scope.submit = function () {
var results = [];
angular.forEach( $scope.questions, function ( v, k ) { results.push( v.value ); } );
console.log( results );
$scope.results = results;
}
}] );
</script>
</head>
<body>
<div ng-controller="Ctl1">
<h1>Page 1</h1>
<form ng-submit="submit()">
<p ng-repeat="item in questions">
<select ng-model="item.value">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</p>
<p>
<button type="submit">Submit</button>
</p>
</form>
<h1>Page 2</h1>
<p ng-repeat="item in results track by $index">{{ item }}</p>
</div>
</body>
</html>
Try to look at it in a binding sense and it's much easier to see what's going on.
Fiddle
{{questions}}
I was able to simplify the example and found a workaround.
Here is the simplified code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="testApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var testApp = angular.module( 'testApp', [] );
testApp.controller( 'Ctl1', [
'$scope',
function ( $scope ) {
$scope.value = null;
}] );
</script>
</head>
<body>
<div ng-controller="Ctl1">
<p>Value: {{ value }}</p>
<select ng-model="value">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
</body>
</html>
Steps to reproduce:
Open the page in Google Chrome
Navigate to the drop-down list using keyboard
Press "arrow down" twice
Live demo: http://jsfiddle.net/QBjkB/
To fix it I’ve initialized "value" with empty string:
function ( $scope ) {
$scope.value = '';
}
And added the option with empty value to a drop-down list:
<select ng-model="value">
<option value="">---</option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
Thank you guys for your ideas!
When I use $.mobile.navigate to change the page, the page will load but the my custom script won't bind to the elements. If I refresh the page, the custom script will load and bind to the elements. I have a select element to choose between pages:
<select name="calc-Nav" id="calc-Nav">
<option value="a.php">A</option>
<option value="b.php">B</option>
<option value="c.php">C</option>
</select>
This is the event bound to the select element:
$("#calc-Nav").on("change", function (e) {
var opt = $("#calc-Nav option:selected").val();
if (opt) {
e.preventDefault();
$.mobile.navigate(opt);
}
});
Also, I link to my javascript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
Does anyone have any ideas how to make this work?
thanks.
EDIT:
Here is the template used for all pages
This is the standard Template of each of the pages.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
</head>
<body>
<div data-role="page">
<div data-role="header">
<div class="ui-field-contain">
<select name="calc-Nav" id="calc-Nav">
<option value="Index.php">Home</option>
<option value="a.php">a</option>
<option value="b.php">b</option>
<option value="c.php">c</option>
</select>
</div>
</div>
<div data-role="main" class="ui-content">
<div id="index">
<h1> Form goes Here. </h1>
</div>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="js/formulas.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</html>
you need to bind them to the document
try-
$(document).on("change","#calc-Nav", function (e) {
var opt = $("#calc-Nav option:selected").val();
if (opt) {
e.preventDefault();
$.mobile.navigate(opt);
}
});
also be sure to add the link to your custom script after the jqmobile script