Question

我正在努力学习Angular，而且我仍然坚持以下几点。我有一个PHP背景，大多使用Laravel，而在Laravel中你可以在你的模型中使用访问器。因此，如果您的模型User具有firstname和lastname。您可以为fullname创建一个访问者，它将返回名字和姓氏：

public function getFullNameAttribute()
{
    return $this->firstname . ' ' . $this->lastname;
}

现在，我想在Angular中做同样的事情。我有一个UserController和一个用户：

function UserController($scope) {
    $scope.users = [
        { firstname: 'John', lastname: 'Doe' }
    ];
}

在＆＃34;视图＆＃34;我希望使用ng-repeat循环访问用户，而不是执行

{{ user.firstname }} {{ user.lastname }}

我希望能够使用

{{ user.fullname }}

也许它在Angular中被称为不同的东西，但我似乎无法找到它......

感谢您的帮助！

Answer 1

Angular尚未本身提供模型抽象（除了简单的$ resource服务，主要处理RESTfull通信层）。但这并不意味着您无法编写和重复使用自己的自定义模型访问器。

选项1 - 使用自定义过滤器

PLUNKER

app.filter("fullName", function () {
  return function (user){
    return user && [user.firstName, user.lastName].join(' ');
  }
});

app.controller("MainCtrl", [
  "$scope", 
  function($scope) {
    $scope.user = {
      firstName: 'John', 
      lastName: 'Doe'
    };

  }
]);

User fullName: {{user | fullName}}

选项2 - 使用自定义$ resource实例访问者：

PLUNKER

app.factory('UserService', function ($resource){
  // User is an instance of $resource service which 
  // in this example uses mock server endpoint
  var User = $resource('user.json');

  // Custom User accessor method
  User.prototype.fullName = function(){
    return [this.firstName, this.lastName].join(' ');
  }

  return User;
});


app.controller("MainCtrl", [
  "$scope", 
  "UserService",
  function($scope, UserService) {
    $scope.user = UserService.get()

  }
]);

User fullName: {{user.fullName()}}

Answer 2

除了Stewie非常复杂的技巧，您还可以使用ng-init。

<div ng-repeat="user in users" 
     ng-init="user.fullname = user.firstname + ' ' + user.lastname">
  {{user.fullname}}
</div>

http://plnkr.co/zU6vM5f8pI3Veh7jr1R9

Answer 3

angular没有模型框架，这里你的范围是模型和附加到它的任何javascript对象（普通的旧javascript对象）。您可能对本文讨论在角度js上实现OO模型层感兴趣。 https://medium.com/opinionated-angularjs/2e6a067c73bc。像其他人所说的那样，实现过滤器或指令可能是最简单的，并且也是可重用的。

Angular.js数据访问器

3 个答案:

选项1 - 使用自定义过滤器

选项2 - 使用自定义$ resource实例访问者：