angularjs指令來更改名稱的格式

即使查看了許多博客，我也不太明白如何編寫AngularJS指令。基本上我有一個格式爲「姓氏，名字」的數組名稱。我想寫一個指令，使其「姓」angularjs指令來更改名稱的格式

我的HTML是這樣

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

如何通過「名稱」參數的指令？

控制器：

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

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

來源

2015-06-22 clearScreen

$ scope.nameArray給出了整個數組....我不想改變每個元素的名稱格式。如果數組中存在鍵值對：{lastname：b，firstname：a}，我想只更改nameArray – clearScreen

中的當前「名稱」的名稱格式... ...您可以在屏幕上顯示它們as： {{names.firstname}} {{names.lastname}} – Carsten

嘗試使用篩選器而不是指令。

這是JsFiddle link。

示例代碼：

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

});

希望它有幫助。

來源

2015-06-22 06:39:27

非常感謝！這解決了我的問題 – clearScreen

@ swordfish12歡迎您！快樂的編碼！ –

您可以設置一個屬性的名稱是這樣的：

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

，然後訪問CUSTNAME的名字在你的指令是這樣的：

scope: { 
    custname: '@' 
}

來源

2015-06-22 06:20:07

我認爲你不需要在這裏指示。過濾器會更合適。您也可以傳遞參數以便輕鬆過濾。

在HTML：

{{ filter_expression | filter : expression : comparator}}

在JavaScript：

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

來源

2015-06-22 06:20:15

在指令

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>

來源

2015-06-22 06:20:50 Mohit

你可以使用jQuery很好，但在角方式可以用屬性也

訪問

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

控制器：

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

    return { 
     restrict: 'A', 

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

來源

2015-06-22 06:21:09

您可以使用正則表達式匹配重新排列名稱

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

來源

2015-06-22 06:25:50 aadarshsg

我認爲這將幫助你

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

來源

2015-06-22 06:26:51 PavanAsTechie

angularjs指令來更改名稱的格式

回答

相關問題