angularjs directive to change the format of name

angularjs directive scope
angularjs directive link
angularjs directive scope binding
custom directive in angularjs w3schools
angularjs-directive replace
angularjs directive controller
directives in angular 7
angular directive vs component

I did not quite understand how to write AngularJS directives even after looking at many blogs. Basically I have an array of names in the format "lastname, firstname". I want to write a directive to make it "firstname lastname"

My html is like this

<div ng-repeat="names in nameArray"
    <custom-name-format> {{names}} </custom-name-format>
</div>

How do I pass the 'names' parameter to the directive?

controller:

angular.module('nameApp').directive('customNameFormat', function() {

    // how do I access and manipulate {{names}} here?
});

Try to use filter instead of directive. Here's the JsFiddle link. Sample Codes:

HTML:

<div ng-app="myApp">
    <ul ng-controller="YourCtrl">
       <li ng-repeat="name in names">
           {{name.name | customNameFormat}}
        </li>
    </ul>
</div>

JS:

'use strict';

var app = angular.module('myApp', []);

app.controller('YourCtrl', ['$scope', function ($scope) {

    $scope.names = [
        {name:'Doe, John'},
        {name:'Naperi, Alberto'},
        {name:'Last, First'},
        {name:'Espolon, Justin'},
        {name:'Bor, Em'},
        {name:'Pik, El'},
      ];

}]);

app.filter('customNameFormat', function() {    

    return function(input) {
        var nameStr = input.split(',').reverse().join(' ');
        return nameStr;
    };

});

Hope it helps.

AngularJS: Developer Guide: Directives, Try to use filter instead of directive. Here's the JsFiddle link. Sample Codes: HTML: <div ng-app="myApp"> <ul ng-controller="YourCtrl"> <li ng-repeat="name in  AngularJS normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel ).

I think you don't need a directive here. A filter will be more appropriate. You can also pass the argument to filter easily.

In HTML:

{{ filter_expression | filter : expression : comparator}}

In JavaScript:

$filter('filter')(array, expression, comparator)

AngularJS - Custom Directives, Convert the : , - , or _ -delimited name to camelCase . For example, the following forms are all equivalent and match the ngBind directive: Edit in Plunker. Upcoming Angular 2 release (most probably RC5) will introduce @AppModule which will take on responsibilities of declaring directives and pipes for the components which belong to the particular

In the directive

angular.module('nameApp').directive('customNameFormat', function() {
  return{
    scope:{
    names : '='
    },
    link: function(scope,elem,attr){
       var nameStr = scope.names //lastname, firstname
       var newNameStr = nameStr.split(',').reverse().join(' ');
       elem.html(newNameStr);

    } 

 }

})

<div ng-repeat="names in nameArray"
   <custom-name-format names="names" ></custom-name-format>
</div>

AngularJS Custom-Directives restrict option guide, Binds HTML control's value to a property on the $scope object. by . Angular 8 Directives. Directives are instructions in the DOM (Document Object Model). It specifies how to place our business logic in Angular. The directive is markers on a DOM element that tell Angular to attach a specified behavior to that DOM element or even transform the DOM element and its children.

You can set an attribute for the name like this:

<div ng-repeat="names in nameArray">
    <custom-name-format custname="{{names}}"> {{names}} </custom-name-format>
</div>

And then access the names of custname in your directive like this:

scope: {
  custname: '@'
}

AngularJS Directives, Replaces the value of HTML control with the value of specified AngularJS expression. Matching Directives. Before we can write a directive, we need to know how AngularJS's HTML compiler determines when to use a given directive.. Similar to the terminology used when an element matches a selector, we say an element matches a directive when the directive is part of its declaration.

you can use jquery as well but in Angular way can access with attributes also

<div ng-repeat="names in nameArray"
    <custom-name-format custom-attr="{{name}}"> {{names}} </custom-name-format>
</div>

controller:

angular.module('nameApp').directive('customNameFormat', function() {

     return {
        restrict: 'A',

        link: function (scope, el, attrs) {
alert(attrs.customAttr);
}
}
});

Angular Directives, binds the value of HTML controls (input, select, textarea) to application data. AngularJS date filter through you can change date format as you want like yyyy-mm-dd, dd-MM-yyyy, MM-dd-yyyy etc. In bellow example you could understand very well date helper to how to use date filter in Angular JS.

ngModelOptions, This directive allows you to modify the behaviour of ngModel directives within your application. For example: <div ng-model-options="{ debounce: 100 }" . method is by making sure the input is placed inside a form that has a name attribute. Explanation: AngularJS Element Directive input[date] is used to create HTML date input with date validation and transformation.. The date must be provided in the date format ISO-8601, i.e yyyy-MM-dd, also the data model must be a Date Object.

AngularJS: API: $compile, Here's an example directive declared with a Directive Definition Object: As the name attribute changes so will the localName property on the directive's scope. Hi, let’s learn about an interesting directive provided in AngularJS, i.e. ng-change directive, the name itself partially gives away the work that it performs. Programmers usually get confused between on-change and ng-change events, let’s clear out everything today in this blog. The topics we will take up today will be: What is a directive?

angularjs directive to change the format of name, I did not quite understand how to write AngularJS directives even after looking at many blogs. Basically I have an array of names in the format "lastname,  AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript!

Comments
  • $scope.nameArray gives the entire array.... I don't want to change the name format of every element. I want to change the nameformat of only the current "names" in nameArray
  • if there are key:value pairs in the array like {lastname: b, firstname: a}... ...you can show them on screen as: {{names.firstname}} {{names.lastname}}