Angular Selects

Developer
Jakob-e
Size
5,228 Kb
Views
32,384
  1. Angular Selects Previews
  2. Angular Selects HTML Codes
  3. Angular Selects CSS Codes
  4. Angular Selects JS Codes

How do I make an angular selects?

A short how to deal with selects in angular (wok in progress – what is missing?). What is a angular selects? How do you make a angular selects? This script and codes were developed by Jakob-e on 04 July 2022, Monday.

Angular Selects Previews
IQ Test

Angular Selects - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Angular Selects</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div data-ng-app="App" data-ng-controller="AppCtrl"> <article> <h1>Angular Selects</h1> <p>– Forget about selectedIndex and $(element).val()</p> <a href="https://docs.angularjs.org/api/ng/directive/select" target="_blank" />AngularJS API : Select</a> <hr> <code class="left">
<strong>DATA</strong>
$scope.data = {{ data | json }} </code> <img class="right" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/angular-logo.png" /> <hr> <h2>A basic example</h2> <ol> <li class="col1">Add a model to hold the selected value (object)</li> <li class="col2">Populate the list using ngOptions (similar to ngRepeat)<br> ... remember to set the label key on the item.</li> <li class="col3">Add default label with an empty value (value = "") <br>Angular will treat this as null</li> </ol> <code class="left">
<strong>HTML</strong>
&lt;select <span class="col1">data-ng-model="selected"</span> <span class="col2">data-ng-options="item.name for item in data"</span>&gt; <span class="col3">&lt;option value=""&gt; Laureates &lt;/option&gt;</span>
&lt;/select&gt; </code> <output class="right">
<strong>RESULT</strong>
<select data-ng-model=" selected1 " data-ng-options="item.name for item in data"> <option value=""> Laureates </option>
</select>
$scope.selected = {{ selected1 | json }} </output>
<hr> <h2>Pre-selecting a value</h2> <p>To pre-select a value simply initialize <em>selected</em> by referencing the data index.<br>This way we make sure not to break data linking.</p> <code class="left">
<strong>JS</strong>
// Select the 5'th option
$scope.selected = $scope.data[4]; </code> <output class="right">
<strong>RESULT</strong>
<select data-ng-model=" selected2 " data-ng-options="item.name for item in data"> <option value=""> Laureates </option>
</select>
$scope.selected = {{ selected2 | json }} </output>
<!-- ==================================== -->
<hr> <h2>Pre-selecting using track by</h2> <p>To set a selected value based on a model object add track by and point to a unique property. <strong>Warning!</strong> Do not use <strong>select as</strong> and <strong>track by</strong> in the same expression. They are not designed to work together – <a href="//docs.angularjs.org/api/ng/directive/ngOptions">as describede here</a>.</p> <code class="left">
<strong>HTML</strong>
&lt;select data-ng-model="selected" data-ng-options="item.name for item in data <span class="col2">track by item.name"</span>&gt; &lt;option value=""&gt; Laureates &lt;/option&gt;
&lt;/select&gt;
<strong>JS</strong>
$scope.selected = { <span class="col2">name: 'Max Planck'</span>, year: 1922 } </code> <output class="right">
<strong>RESULT</strong>
<select data-ng-model=" selected3 " data-ng-options="item.name for item in data track by item.name"> <option value=""> Laureates </option>
</select>
$scope.selected = {{ selected3 | json }} </output>
<!-- ==================================== -->
<hr> <h2>Customizing labels</h2> <p>To concatenate multible data values or add custom text use a regular value + ' ' + value syntax.<br> You don't need the ( ) – they are just added for readability.</p> <code class="left">
<strong>HTML</strong>
&lt;select data-ng-model="selected" data-ng-options="<span class="col2">(item.year + ' – ' + item.name)</span> for item in data"> &lt;option value=""&gt; Laureates &lt;/option&gt;
&lt;/select&gt; </code> <output class="right">
<strong>RESULT</strong>
<select data-ng-model="selected3"
data-ng-options="item.year + ' – ' + item.name for item in data">
<option value=""> Laureates </option>
</select>
$scope.selected = {{ selected3 | json }}
</output> <hr> <h2>Customizing selected value</h2> <p>By default selected is the same object as in data. If you for some reason need it to be just one of the data properties – use <em>"as"</em> to convert it.</p> <code class="left">
<strong>HTML</strong>
&lt;select data-ng-model="selected" data-ng-options="<span class="col2">item.name <strong>as</strong> (item.year + ' – ' + item.name)</span> for item in data"> &lt;option value=""&gt; Laureates &lt;/option&gt;
&lt;/select&gt; </code> <output class="right">
<strong>RESULT</strong>
<select data-ng-model="selected4"
data-ng-options="item.name as (item.year + ' – ' + item.name) for item in data">
<option value=""> Laureates </option>
</select>
$scope.selected = {{ selected4 | json }}
</output> <hr> <h2>Sorting the list</h2> <p>Like ngRepeat you can sort ngOptions by adding a filter – this does not affect data.<br> <strong>Note</strong> in this example both selectboxes are using the same model value <br>– why changing one will cause both to change. </p> <code class="left">
<strong>HTML</strong>
&lt;select data-ng-model="selected" data-ng-options="(item.year + ' – ' + item.name) for item in data | <strong class="col2">orderBy:'name'</strong>"&gt; &lt;option value=""&gt; Laureates &lt;/option&gt;
&lt;/select&gt;
// Filtering does not affect the data index.
// when pre-selecting a value $scope.data[4];
// still points to the same entry "Niels Bohr" </code> <output class="right">
<strong>RESULT</strong>
<select data-ng-model="selected6"
data-ng-options="item.year + ' – ' + item.name for item in data | orderBy:'year'">
<option value=""> Laureates by year </option>
</select>
<select data-ng-model="selected6"
data-ng-options="item.year + ' – ' + item.name for item in data | orderBy:'name'">
<option value=""> Laureates by name</option>
</select>
$scope.selected = {{ selected6 | json }} </output>
<hr> <h2>Grouping</h2> <p>To group options use <em>"group by"</em>. As Angular will create the groups based on filtered data – why we do a double orderBy. First we order by gender (placing the female group first) and then a sub order by name (listing the names alphabetically). <br><strong>Note</strong> grouping is case sensitive why male and Male will create two groups.</p> <code class="left">
<strong>HTML</strong>
&lt;select data-ng-model="selected7" data-ng-options="item.year + ' – ' + item.name <strong class="col2">group by item.gender</strong> for item in data | <strong>orderBy:['gender','name']</strong>"&gt; &lt;option value=""&gt; Laureates by gender and name &lt;/option&gt;
&lt;/select&gt; </code> <output class="right">
<strong>RESULT</strong>
<select data-ng-model="selected7"
data-ng-options="item.year + ' – ' + item.name group by item.gender for item in data | orderBy:['gender','name']">
<option value=""> Laureates by gender and name </option>
</select>
$scope.selected = {{ selected7 | json }} </output>
<!--
<p>Comming up...</p> <h2>Simple array data</h2>
<code class="left">
<strong>DATA</strong>
$scope.simpledata = {{ simpledata | json }} </code> <output class="right">
<strong>RESULT</strong>
<select data-ng-model="selected8"
data-ng-options="item for item in simpledata">
<option value=""> Laureate (simple array) </option>
</select>
$scope.selected = {{ selected8 | json }} </output> <h2>Object data</h2>
<code class="left ">
<strong> DATA</strong>
$scope.objectdata = {{ objectdata | json }} </code> <output class="right">
<strong>RESULT</strong>
<select data-ng-model="selected9"
data-ng-options="value as key + ' - ' + value.year + ' - ' + value.name for (key, value) in objectdata">
<option value=""> Laureates (object data) </option>
</select>
$scope.selected = {{ selected9 | json }}
</output> -->
</article>
<p></p>
</div> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Angular Selects - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0;
}
body { padding: 50px;
}
body > div { max-width: 900px; margin: 0 auto;
}
code, output { display: block; white-space: pre-wrap; font: 11px monospace; padding: 1em; background: #f1f1f1; border: 1px solid #ddd; margin-bottom: 1.4em; min-height: 200px;
}
h1 { font: 2.2em/1.4 sans-serif;
}
h2 { font: 1.6em/2 sans-serif;
}
h3 { font: 1.4em/2 sans-serif;
}
p, a, li { font: .9em/1.4 sans-serif; margin-bottom: 1em; max-width: 640px;
}
p code, p output, a code, a output, li code, li output { display: inline; padding: 0;
}
ol { margin-left: 1.4em; margin-bottom: 1.4em;
}
li { font-size: .9em; list-style: none; position: relative;
}
hr { margin: 1.4em 0; height: 0; border: 0; border-bottom: 1px solid #fff; clear: both;
}
p { clear: both;
}
output { background: #d4d9de;
}
.left { float: left; width: 64%;
}
.right { float: right; width: 35%;
}
img.right { width: 25%;
}
code .col1 { color: olive;
}
code .col2 { color: darkred;
}
code .col3 { color: darkorange;
}
li:before { content: ''; display: block; width: 10px; height: 10px; position: absolute; top: 3px; left: -15px;
}
li.col1:before { background-color: olive;
}
li.col2:before { background-color: darkred;
}
li.col3:before { background-color: darkorange;
}
[data-ng-app] { padding-bottom: 3em;
}

Angular Selects - Script Codes JS Codes

angular.module('App',[])
.controller('AppCtrl',['$scope',function($scope){ // Data array $scope.data = [ { name: 'Wilhelm Röntgen', year: 1901, gender:'Male' }, { name: 'Marie Curie', year: 1903, gender:'Female' }, { name: 'Max Planck', year: 1918, gender:'Male' }, { name: 'Albert Einstein', year: 1921, gender:'Male' }, { name: 'Niels Bohr', year: 1922, gender:'Male' } ] $scope.simpledata = [ 'Wilhelm Röntgen', 'Marie Curie', 'Max Planck', 'Albert Einstein', 'Niels Bohr' ] $scope.objectdata = { 'A':{ name: 'Wilhelm Röntgen', year: 1901 }, 'B':{ name: 'Marie Curie', year: 1903 }, 'C':{ name: 'Max Planck', year: 1918 }, 'D':{ name: 'Albert Einstein', year: 1921 }, 'E':{ name: 'Niels Bohr', year: 1922 } } $scope.selected3 = { name: 'Max Planck', year: 1922 } // Example 2 - pre selection $scope.selected2 = $scope.data[4]
}]);
Angular Selects - Script Codes
Angular Selects - Script Codes
Home Page Home
Developer Jakob-e
Username jakob-e
Uploaded July 04, 2022
Rating 4.5
Size 5,228 Kb
Views 32,384
Do you need developer help for Angular Selects?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jakob-e (jakob-e) Script Codes
Name
SVG Path Circle
The 100
Profile Top
CSS Shapes
Placeholder Services
Video wallpaper and css filters
Angular Tab Menu
Responsive Font Sizing
Very Simple ViewPort Bookmarklet
SCSS Unit Conversion
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!