angularjs指令更改名稱的格式
[英]angularjs directive to change the format of name
問題描述
即使看了很多博客，我也不太明白如何編寫AngularJS指令。 基本上我有一個名為“lastname，firstname”的名字數組。 我想編寫一個指令，使其成為“firstname lastname”
我的HTML是這樣的
<div ng-repeat="names in nameArray"
<custom-name-format> {{names}} </custom-name-format>
</div>
如何將'names'參數傳遞給指令？
控制器：
angular.module('nameApp').directive('customNameFormat', function() {
// how do I access and manipulate {{names}} here?
});
8 個解決方案
解決方案1
4 已采納 2015-06-22 06:39:27
嘗試使用filter而不是指令 。
這是JsFiddle鏈接 。
示例代碼 ：
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;
};
});
希望能幫助到你。
解決方案2
3 2015-06-22 06:20:15
我認為你這里不需要指令。 過濾器會更合適。 您還可以傳遞參數以輕松過濾。
在HTML中：
{{ filter_expression | filter : expression : comparator}}
在JavaScript中：
$filter('filter')(array, expression, comparator)
解決方案3
3 2015-06-22 06:20:50
在指令中
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>
解決方案4
2 2015-06-22 06:20:07
您可以為此名稱設置屬性，如下所示：
<div ng-repeat="names in nameArray">
<custom-name-format custname="{{names}}"> {{names}} </custom-name-format>
</div>
然后在您的指令中訪問custname的名稱，如下所示：
scope: {
custname: '@'
}
解決方案5
2 2015-06-22 06:21:09
您也可以使用jquery，但是以Angular方式也可以使用屬性訪問
<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);
}
}
});
解決方案6
2 2015-06-22 06:25:50
您可以使用正則表達式匹配來重新排列名稱
var parts = name.match(/(\w+), (\w+)/)
parts[2] + " " + parts[1]
解決方案7
2 2015-06-22 06:26:51
我想這會幫助你
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"}];
}
}});
解決方案8
0 2018-11-30 06:50:25
嘗試使用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.com/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>
angularJs指令格式日期
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.