angularjs-directive | 易学教程

AngularJS : custom iterations/data transformations and grouping… when simple ng-repeat just won't cut it

阅读更多关于 AngularJS : custom iterations/data transformations and grouping… when simple ng-repeat just won't cut it

Still this problem Angular.js more complex conditional loops but I felt that the answer to the question as it was asked was right so I accepted it. So let me elaborate more than I did in the original question. I'm trying to get this <h3>11.4.2013</h3> <ul> <li>oofrab | 4 | 11.4.2013 14:55 <button>remove</button></li> <li>raboof | 3 | 11.4.2013 13:35 <button>remove</button></li> </ul> <h3>10.4.2013</h3> <ul> <li>barfoo | 2 | 10.4.2013 18:10 <button>remove</button></li> <li>foobar | 1 | 10.4.2013 12:55 <button>remove</button></li> </ul> from this data structure [ { "id": 4, "name": "oofrab",

ng-change not working on a text input

阅读更多关于 ng-change not working on a text input

I am new to angular js. In my code there is color picker initialized from a text field. User changes the value of color and I want that color to be reflected as a background of a text in a span. It is not working. What is missing? HTML: <body ng-app=""> <input type="button" value="set color" ng-click="myStyle={color:'red'}"> <input type="button" value="clear" ng-click="myStyle={}"> <input type="text" name="abc" class="color" ng-change="myStyle={color:'green'}"> <br/> <span ng-style="myStyle">Sample Text</span> <pre>myStyle={{myStyle}}</pre> </body> Plunker - http://plnkr.co/edit

AngularJS Directive Numeric Format Masking

阅读更多关于 AngularJS Directive Numeric Format Masking

The directive I have created uses the function setFormatting to mask the text value in an input field. scope.$watch(element, function() { modelCtrl.$setViewValue(setFormatting(element.val(), attrs.symbol)); modelCtrl.$render(); }); element.bind('blur', function() { modelCtrl.$setViewValue(setFormatting(element.val(), attrs.symbol)); modelCtrl.$render(); }); The scope.$watch applies the mask when the content is loaded/applied the first time, the element.bind applies the mask for the other times. The scope.$watch is storing the symbol (if there is one) as part of the ng-model variable. The

AngularJS : Watch element.html() in a directive

阅读更多关于 AngularJS : Watch element.html() in a directive

I am looking to create a mardown directive (restrict A) which would make me able to use same recipient for ng-view . So I would basically load only .md files in views and apply my function on its content each time ng-view change. So : index.html <div markdown ng-view></div> with two views containing, let say, view1.md #That should be h1 and view2.md ##That should be h2, no ? My actual code is 'use strict'; angular.module('btford.markdown', []). directive('markdown', function () { var converter = new Showdown.converter(); return { restrict: 'A', link: function (scope, element, attrs) { scope.

in a directive, $watch fires two times reverting newValue to the original pre $watch firing value

阅读更多关于 in a directive, $watch fires two times reverting newValue to the original pre $watch firing value

I'm pretty sure I'm doing something wrong because of my little experience with angular. Probably the answer is already somewhere in stackoverflow, and I'm not asking (googling) the right questions. I have this pretty simple directive. It's just a span with four states, that I want to change on every click on the span. Every click progresses the state forward and then loops back. Every state has a different css class. I want the values changed on the parent model everytime the value of the directive changed (hence the "=" in the isolate scope declaration, right?). I put a watch on the value to

Angularjs filtering values based on selected option

阅读更多关于 Angularjs filtering values based on selected option

Hi I am trying to display certain values based on option selected in a drop down. My code is data is [{"city":"New York","location":"123"}, {"city":"Chicago","location":"953"} {"city":"New York","location":"788"} {"city":"Chicago","location":"853"}] Code is <form name="test" class="form-horizontal"> <div class="from-group container"> <label for="abc" class="col-sm-2">City</label> <div class="col-sm-10"> <select class="form-control" ng-model="cc"> <option ng-repeat="city in cities" value="city.value">{{city.name}}</option> </select> </div> <ul> <li ng-repeat="att in cities">{{att.locations |

Angular 2/4 : How to check length of input's value using directive?

阅读更多关于 Angular 2/4 : How to check length of input's value using directive?

I've created one custom attribute directive that can validate input, It has value or not. Please refer below code. I don't know why if condition is not working, in console.log it is showing 0 only. is there anything wrong in my code? I tried with other angular's app lifecycle event too. Thanks! import { Directive, ElementRef, Input, AfterContentInit ,Renderer } from '@angular/core'; @Directive({ selector: '[inputfocus]' }) export class InputFocusedDirective implements AfterContentInit { public valLength; constructor(public el: ElementRef, public renderer: Renderer) {} ngAfterContentInit() {

Angular js directive to show alert for browser back button when unsaved data in form

阅读更多关于 Angular js directive to show alert for browser back button when unsaved data in form

问题 I'm a newbie to angularjs.Is there any way to show alert when a form has unsaved data and user presses browser back button. Any pointers to how to achieve this would be appreciated. Update: : angular.module('myApp.directives', []).directive('confirmOnExit', function() { return { link: function($scope, elem, attrs) { $scope.$on('$locationChangeStart', function(event, next, current) { if ($scope.myForm.$dirty) { if(!confirm("Ahh the form is dirty, do u want to continue?")) { event

ASP.NET MVC Partial View in an AngularJS directive

阅读更多关于 ASP.NET MVC Partial View in an AngularJS directive

I'm currently working on an ASP.NET MVC project to which some AngularJS was added - including some AngularJS directives. I need to add to an AngularJS directive a MVC partial view. Obviously, @Html.Partial("_PartialView", {{name}}) doesn't work. So far all my searches online provided no help. Any idea how I could render a partial view inside an Angular directive? Thanks! Angular exists strictly on the client side whereas MVC views exist on the server side. These two cannot interact directly. However, you could create an endpoint in which your partial view is returned as HTML. Angular could

Creating an AngularJS Directive for jQuery UI Button

阅读更多关于 Creating an AngularJS Directive for jQuery UI Button

Update : Fiddle w/ full solution: http://jsfiddle.net/langdonx/VXBHG/ In efforts to compare and contrast KnockoutJS and AngularJS, I ran through the KnockoutJS interactive tutorial , and after each section, I'd rewrite it in AngularJS using what little I already knew + the AngularJS reference . When I got to step 3 of the Creating custom bindings tutorial, I figured it would be a good time to get spun up on Angular Directives and write a custom tag. Then I failed miserably. I'm up against two issues that I haven't been able to figure out. I created a new Fiddle to try and wrap my head around

订阅 angularjs-directive