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?
});

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?
});

• javascript
• angularjs
• angularjs-directive

• $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 – clearScreen Commented Jun 22, 2015 at 6:16
• 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}} – Carsten Commented Jun 22, 2015 at 6:19

8 Answers 8

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.

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 : parator}}

In JavaScript:

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

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>

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: '@'
}

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);
}
}
});

You can use regex matching to rearrange the name

var parts = name.match(/(\w+), (\w+)/)
parts[2] + " " + parts[1]

I think this will help you out

var demo = angular.module('demo', []);
demo.directive('displayTime', function($parse) {
    return {
        restrict: 'E',
        replace: true,
        transclude: false,
        template: '<ul><li ng-repeat="data in datas">{{data.first}}----- {{data.last}}</li></ul>',
        link: function (scope, element, attrs, controller) {
          scope.datas = [{first:"pavan",last:"techie"},{first:"sword",last:"fish"}]; 
        }
    }});

JS FIDDLE

Try to Change your name using AngularJs

body{
  font-family: 'arial';
}
ul,li{
  list-style: none;
}
ul{
  padding: 0px;
  margin:0px;
}
.name-demo{
  border: 1px solid #333;
  padding: 10px;
}
.name-demo li{
  margin-bottom: 15px;
  margin-top: 15px;
}
.name-demo li input{
  border:1px solid #e4e4e4;
  height: 35px;
  padding: 5px;
  width: 200px;
  margin-left: 10px;
}

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<p>Try to Change your name using AngularJs</p>

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="name-demo">
    <ul>
      <li>
        First Name: <input type="text" ng-model="firstName">
      </li>
      <li>
        Last Name: <input type="text" ng-model="lastName">
      </li>
      <li>
        Full name is: {{firstName + " " + lastName}}
      </li>
    </ul>
  </div>
</div>

<script>

var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope){
	$scope.firstName = "Arvinda";
	$scope.lastName = "Kumar";
});
</script>

</body>
</html>