angularjs-directive | 易学教程

angular ng-repeat with condition

阅读更多关于 angular ng-repeat with condition

问题 How do you do something like this in angular with ng-repeat? I'll be using the example from the documentation which inits an array with 2 friends, what if I wanted to only do a repeat for all friends that are 26 and older? <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script> </head> <body> <div ng-init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]"> I have {{friends.length}} friends. They are: <ul> <li ng-repeat="friend in

Access Parent Scope in Transcluded Directive

阅读更多关于 Access Parent Scope in Transcluded Directive

问题 I would like to access a parent directive's scope, but I can't seem to get the right combination of settings. Is this possible and is it the right approach? I really want to avoid putting something like SOME_CONST (which would help me make DOM updates through control flow) in MyCtrl <div ng-controller="MyCtrl"> <parent> <child></child> </parent> </div> var myApp = angular.module('myApp',[]); function MyCtrl($scope) { $scope.obj = {prop:'foo'}; } myApp.directive('parent', function() { return {

Databinding is not working with kendo grid in angular JS directives

阅读更多关于 Databinding is not working with kendo grid in angular JS directives

问题 I am new to angular js and kendo UI. Here is my plunk Plunk I have a directive and want to bind data to the kendo grid. Script.js - code for module, controller and directive. (function(){ angular.module('app', ['kendo.directives']); angular.module('app').controller('MyCtrl',function($scope){ var data = { accountlist: [ {accountnumber: '123456', accountname: 'Firm 1'}, {accountnumber: '111111', accountname: 'Firm 2'}, {accountnumber: '1234567', accountname: 'Firm 3'}, {accountnumber: '1234568'

Directive in Angular not rendering on $state.go but is on initial load

阅读更多关于 Directive in Angular not rendering on $state.go but is on initial load

问题 I have a directive setup to render some d3 charts for me. This works well using the following code: angular.module('sc.directives') .directive("nvd3Chart", function () { 'use strict'; function lineChart(data) {...} function pnbChart(data) {...} return { restrict: "EA", template: '<svg></svg>', scope: '=chartData', transclude: true, link: function (scope, elem, attrs) { attrs.$observe('chartData', function (chartData) { var data = JSON.parse(chartData); if (data.graph_type === 'line') { return

how to implement confirm on exit in angular 4?

阅读更多关于 how to implement confirm on exit in angular 4?

问题 I want to know how can I implement a confirm-on-exit component so that on page refresh or leaving tab or window or screen I can execute a confirm on exit method, so that if user click OK he will leave the screen and on click on NO he will remain on same screen? Code I am using here is: import { Component, OnInit, Input, Output, HostListener } from '@angular/core'; @Component({ selector: 'confirmonexit', templateUrl: './confirm-on-exit.html' }) export class ConfirmOnExitComponent { @Input()

Sharing Data between Child Directives

阅读更多关于 Sharing Data between Child Directives

问题 I have three directives defined: Parent This should share variables between the other two directives - Child One and Child Two. Child One This contains an input field representing a search term. Whenever this changes I use a link function to update the variable stored in the parent controller. In real world use I will then carry out a search based on this term and update the array. But for simplicity in this example, I just want to create a new array with length 1, which I want to be

Sharing Data between Child Directives

阅读更多关于 Sharing Data between Child Directives

Unable to get the resolved attributes within custom directive

阅读更多关于 Unable to get the resolved attributes within custom directive

问题 I have been trying to write a custom directive for an input field with dynamic id, in the directive am unable to get the correct id. <input id="myInput{{$index}}" my-dir="fn()"/> myApp.directive('myDir', function ($parse) { var obj = { require: "ngModel", link: { post: function (scope, element, attrs) { var fn = $parse(attrs.myDir); var elementId = element.attr('id'); console.log(elementId); // Here I see myInput{{$index}} instead of myInput0, by this time angular is not resolving the value }

Why does my custom directive not update when I derive the output from the bounded data?

阅读更多关于 Why does my custom directive not update when I derive the output from the bounded data?

问题 Basically I have a custom directive which has an isolated scope. I two-way bind a piece of data and given those data, I generate some output. For example, the data is two numbers 1 and 3. In the link() function of the directive I create a new array generating a sequential number between the two numbers. That new array I set in the scope. In the template, I do an ng-repeat on that new array. If I change those two numbers, the template does not seem to pick up the change. Here is a jsfiddle

How do I get the total sum in ng-init and ng-repeat - angularjs

阅读更多关于 How do I get the total sum in ng-init and ng-repeat - angularjs

问题 Having a problem with in ng-init and ng-repeat angularjs i'm trying to loop the fields rates to get the total for example this is my table nane +++++++ id +++++++ rate joe +++++++++ 1 +++++++ 3 joe +++++++++ 2 +++++++ 3 joe +++++++++ 3 +++++++ 3 joe +++++++++ 4 +++++++ 3 this my code. <table> <tr> <td>name</td> <td>rate</td> </tr> <tr ng-repeat="item in videos"> <td>{{item.name}}</td> <td ng-init="videos.total.rate = videos.total.rate + item.rate">{{item.rate}}</td> </tr> <tr> <td>Total</td>