javascript - How to create a custom angular directive which contains multiple input controls? -

-

i working on first angular project. better or worse, trying convert repeatable html directives. have requirement let user select time in hh:mm format. need show 2 select elements. since need give control @ quite few places, trying convert directive.

directive template

<div class="filterlabel">{{fieldlabel}}</div> <select class="filterddl" ng-style="{width: selecthhwidthpx + 'px'}">     <option value="none">hh</option>         <option value="8">08</option>            <option value="9">09</option>            <option value="10">10</option>           <option value="11">11</option>           <option value="12">12</option>           <option value="13">13</option>           <option value="14">14</option>           <option value="15">15</option>           <option value="16">16</option>           <option value="17">17</option>       </select> <span>:</span> <select class="filterddl" ng-style="{width: selecthhwidthpx + 'px'}">     <option value="none">mm</option>         <option value="0">00</option>            <option value="30">30</option>       </select>

my expected end result directive obtain time value in minutes [(hh * 60 + mm)] further calculations. can't think of way in can single ngmodel associated directive returns time in minutes combination of 2 dropdowns. read link function can't figure out if can use in scenario. practice have custom directives span on multiple input elements?

please refer below code:

<!doctype html>  <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta charset="utf-8" />     <title></title>     <script src="angular.min.js"></script>      <script type="text/javascript">         angular.module('demoapp', [])             .controller('controller', ['$scope', function ($scope) {                 $scope.totalminutes = function () {                     return $scope.mintutes + ($scope.hours * 60);                 }                 $scope.mintutes = 1;                 $scope.hours = 1;             }])             .directive('timeselection', function () {                 return {                     restrict: 'e',                     template: "hours:<input type='number' ng-model='hours' /> minutes:<input type='number' ng-model='minutes' />",                     scope: {                         hours: "=hours",                         minutes:"=mintutes"                     }                 };             });     </script> </head> <body>     <div ng-app="demoapp">         <div ng-controller="controller">             <time-selection hours="hours" mintutes="mintutes" ></time-selection>             total minutes : {{totalminutes()}}         </div>     </div> </body> </html>

Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5); ...
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:...
Read more