FormStamp - AngularJS के लिए विजेट पुस्तकालय

• फॉर्म बिल्डर - रूपों के साथ काम करने के लिए उच्चतम स्तर, रूबी पारिस्थितिकी तंत्र पर रूबी से फार्म जनरेटर के साथ सादृश्य द्वारा बनाई गई;
• प्रपत्रों के साथ काम करते समय और मानक एचटीएमएल 5 तत्वों द्वारा हल नहीं किए जाने पर 80% कार्यों को कवर करने वाले विगेट्स का एक सेट;
• नए विजेट बनाने के लिए निम्न स्तर के घटक।

• सभी विगेट्स को AngularJS निर्देशों का उपयोग करके स्क्रैच से लिखा गया है, जो आपको कोड को कम करने और इसे अधिक पठनीय बनाने की अनुमति देता है;
• AngularJS (ngModel, ngRequired ... के लिए समर्थन) के साथ पूर्ण एकीकरण;
• डिफ़ॉल्ट स्टाइल बूटस्ट्रैप के साथ।

स्थापना निर्देश

bower install angular-formstamp 

फॉर्म बिल्डर

 <form class="form-horizontal" role="form" name="form" ng-app="form-demo"> <div class="form-group" ng-class="{'has-error': form.username.$invalid}"> <label for="username" class="col-sm-2 control-label">Username</label> <div class="col-sm-10"> <input type="text" class="form-control" id="username" placeholder="Username" required="required" ng-pattern="/awesome/" name="username" ng-model="username" /> <p class="alert alert-danger" ng-show='form.username.$error.pattern'> Username should be awesome </p> </div> </div> <div class="form-group" ng-class="{'has-error': form.email.$invalid}"> <label for="email" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" placeholder="Email" required="required" name="email" ng-model="email" /> <p class="alert alert-danger" ng-show='form.email.$error.email'> Email should be valid </p> </div> </div> <div class="form-group" ng-class="{'has-error': form.password.$invalid}"> <label for="password" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="password" placeholder="Password" required="required" name="password" ng-model="password" ng-minlength='6' /> <p class="alert alert-danger" ng-show='form.password.$error.minlength'> Password should be longer </p> </div> </div> <div class="form-group"> <label for="birthDate" class="col-sm-2 control-label">Birth Date</label> <div class="col-sm-10"> <input type="date" class="form-control" id="birthDate" placeholder="Birth Date" ng-model="birthDate" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign up</button> </div> </div> </form> 

• वह मॉडल जिसके साथ फ़ॉर्म जुड़ा हुआ है;
• मॉडल विशेषताएँ जो फ़ॉर्म पर प्रदर्शित होती हैं;
• प्रपत्र में प्रदर्शित विशेषताओं में से प्रत्येक के लिए फार्म तत्वों के प्रकार।

 <fs-form-for model="samurai"> <fieldset class="form-horizontal"> <fs-input as="text" name="username" required="" label="Name"></fs-input> <fs-input as="email" name="email" required="" label="Email"></fs-input> <fs-input as="password" name="password" required="" label="Email"></fs-input> <fs-input as="fs-date" name="birthdate" required="" label="Date of Birth"></fs-input> </fieldset> </fs-form-for> 

• fsFormFor - एक फॉर्म बनाने वाला एक निर्देश, model विशेषता उस model को इंगित करता है जिसके लिए फॉर्म बनाया जा रहा है;
• fsInput एक निर्देश है जो निम्नलिखित विशेषताओं के साथ फार्म में प्रत्येक तत्व का वर्णन करता है:
  • as - फार्म तत्व का प्रकार;
  • name - मॉडल विशेषता का नाम;
  • label - label पाठ।

विजेट सेट

• दर्ज मूल्य द्वारा फ़िल्टर करने की क्षमता के साथ चयन करें;
• मुफ्त पाठ (कॉम्बो बॉक्स) के लिए समर्थन के साथ चयन करें;
• प्रवेश किए गए मान द्वारा फ़िल्टर करने की क्षमता के साथ गुणा;
• मुक्त पाठ (टैग इनपुट) के लिए समर्थन के साथ गुणा;
• रेडियो समूह;
• चेकबॉक्स समूह;
• तारीख और / या समय और कैलेंडर के साथ काम करने के लिए विगेट्स।

 freetext 

 items 

 ng-model 

 ng-disabled 

 <div fs-select items=”arrayOfOptions” ng-disabled=”flag” ng-model=”selectedOption” freetext=”true”></div> 

दिशा निर्देशों

• fsList - मदों की एक सूची प्रदर्शित करता है, आपको सूची में एक आइटम का चयन करने और कीबोर्ड से चयन को स्थानांतरित करने की अनुमति देता है;
• fsNullForm - मूल तत्व से एनकोमॉडल से जुड़े तत्व तत्व को छुपाता है;
• fsInput - कीबोर्ड ईवेंट्स से निपटने और fsInput सरल fsInput ;
• fsCalendar - कैलेंडर प्रदर्शित करता है और आपको चयनित तिथि को चिह्नित करने की अनुमति देता है।

• selectedItem - वर्तमान चयनित मूल्य। केवल पढ़ें
• onSelect(value) - मूल्य चयन घटना के लिए इवेंट हैंडलर। उपयोगकर्ता द्वारा कार्यान्वित किया जाना चाहिए।
• move(d) एक फ़ंक्शन है जो पॉइंटर को तत्वों की निर्दिष्ट संख्या तक ले जाता है।

  app.directive("demoAudio", function() { return { restrict: "E", scope: { track: '=' }, template: "<audio controls />", replace: true, link: function($scope, $element, $attrs) { return $scope.$watch('track', function(track) { $element.attr('src', track.stream_url + "?client_id=8399f2e0577e0acb4eee4d65d6c6cce6"); return $element.get(0).play(); }); } }; }); 

 <script src="http://connect.soundcloud.com/sdk.js"></script> 

 function ListDemoCtrl($scope) { //  SoundCloud SDK SC.initialize({ client_id: '8399f2e0577e0acb4eee4d65d6c6cce6' }); //    SoundCloud $scope.$watch('search', function () { SC.get('/tracks', { q: $scope.search, license: 'cc-by-sa' }, function(tracks) { $scope.$apply(function() { $scope.tracks = tracks }) }) }); $scope.search = 'bach'; $scope.tracks = []; //        fsList $scope.move = function (d) { $scope.listInterface.move(d); }; //      fsList $scope.listInterface = { onSelect: function (selectedItem) { $scope.select(selectedItem) } }; $scope.select = function(selectedItem) { $scope.selectedTrack = selectedItem || $scope.listInterface.selectedItem; }; } 

 <div ng-controller="ListDemoCtrl" style="postion: relative;"> <div class="row"> <div class="col-xs-7"> <!--  fsInput     --> <input class="form-control" autofocus="1" fs-input fs-up="move(-1)" fs-down="move(1)" fs-enter="select()" ng-model="search"> <!--  fsList      --> <div fs-list="" items="tracks" class="no-popup"> <!--      --> <img src="{{ item.artwork_url }}" width="30" height="30"> {{item.title}} <small class="text-muted">{{item.genre}}</small> </div> </div> <div class="col-xs-5"> <!--     fsList  - --> <demo-audio track="selectedTrack"></demo-audio> <pre style="margin-top: 20px;">Selected Item: {{ selectedTrack | json }}</pre> </div> </div> </div>