AngularJS Datalist Directive

Size
2,366 Kb
Views
54,648

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

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,648
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
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!