AngularJS Datalist Directive

Developer
Michael E Conroy
Size
2,366 Kb
Views
54,621

How do I make an angularjs datalist directive?

Simple example on how to create an AngularJS directive to automate the creation of an HTML5 datalist form entry. The example also shows how requiring the ngModel controller for a directive works.. What is a angularjs datalist directive? How do you make a angularjs datalist directive? This script and codes were developed by Michael E Conroy on 03 July 2022, Sunday.

AngularJS Datalist Directive Previews
IQ Test

AngularJS Datalist Directive - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS Datalist Directive</title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootswatch/3.1.1/superhero/bootstrap.min.css'>
</head>
<body> <body ng-app='dataList' ng-controller='dataListCtrl'> <angled-datalist list='browsers' ng-model='browser'></angled-datalist> <div class='well'> Choosen: {{browser}} </div>
</body> <script src='http://code.angularjs.org/1.2.17/angular.min.js'></script>
<script src='http://code.angularjs.org/1.2.17/angular-sanitize.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

AngularJS Datalist Directive - Script Codes JS Codes

angular.module('dataList',['ngSanitize'])
.controller('dataListCtrl',['$scope',function($scope){ $scope.browsers = [ { option : 'Google Chrome', value : 'chrome' }, { option : 'Microsoft Internet Explorer', value : 'ie' }, { option : 'Mozilla Firefox', value : 'firefox' }, { option : 'Opera', value : 'opera' }, { option : 'Safari', value : 'safari' } ]; $scope.browser = '';
}]) // end dataListCtrl
.directive('angledDatalist',['$sce',function($sce){ return{ restrict : 'AE', require : '?ngModel', template : '<ng-form name="dlTest"><input list="dl" ng-model="choosen"><datalist id="dl"><select><option ng-repeat="opt in list" label="{{opt.option}}">{{opt.value}}</option></select></datalist></ng-form>', replace : false, scope : { list : '=' }, link : function(scope,element,attrs,ngModel){ if(!ngModel || (scope.list.length <= 0)) return; scope.choosen = ''; scope.$watch('choosen',function(val,old){ ngModel.$setViewValue(val); }); } }; // return
}]); // end angledDatalist
AngularJS Datalist Directive - Script Codes
AngularJS Datalist Directive - Script Codes
Home Page Home
Developer Michael E Conroy
Username m-e-conroy
Uploaded July 03, 2022
Rating 3
Size 2,366 Kb
Views 54,621
Do you need developer help for AngularJS Datalist Directive?

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!

Michael E Conroy (m-e-conroy) Script Codes
Name
Dragging in AngularJS
Testing CSS Animations
AngularJS Windows
AngularJS Droppable Directive With Dynamic Template
AngularJS Floating Menu
AngularJS Draggable Directive
AngularJS Dialog Service, with i18n
Sass Bourbon Tests
Course Layout in Angular Material
Edit User Details in Dialog
Create amazing captions 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!