Question

我正在使用angular来为某些数据发出$ http get请求（我删除了网址以便于在此处阅读）：

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

app.controller('UserProfile', ['$http', function($http){

     var profile = this;

     profile.bio = [ ];

     $http.get('URL').success(function(data){

          profile.bio = data;

     });

}]);

所述数据总是随机的，并且组织如下：

"person": {
    "gender": "female",
    "first-name": "Yvonne",
    "family-name": "Young",
    "pictureURL": "/assets/img/female2.png"
}

我正在试图找出如何根据性别是否返回男性或女性，将特定类添加到html元素。有什么想法我还需要添加到我的控制器才能执行此操作吗？谢谢！

这是我失败的尝试：

var app = angular.module('pointsource', []);
app.controller('UserProfile', ['$http', function($http){
var profile = this;

profile.bio = [ ];

$http.get('http://applicant.pointsource.us/api/testUser/57869704f62a2d8f3c05da99').success(function(data){
  profile.bio = data;
  if (profile.bio.person.gender == 'male') {
      $('#gender').addClass('male');
  }
});
}]);

Answer 1

如果您使用jquery在角度控制器中进行DOM更改，通常表明您正在以错误的方式执行此操作。更好的方法是ngClass指令（https://docs.angularjs.org/api/ng/directive/ngClass）并将其绑定到控制器中的值。

<div ng-controller="UserProfile as profile>
    <div id="gender" ng-class="profile.bio.person.gender"></div>
</div>

并且在控制器中根本不需要对DOM元素进行任何引用：

app.controller('UserProfile', ['$http', function($http){
var profile = this;

profile.bio = [ ];

    $http.get('http://applicant.pointsource.us/api/testUser/57869704f62a2d8f3c05da99'    ).success(function(data){
  profile.bio = data;

    });
}]);

查看https://plnkr.co/edit/kfDtUGTHbmBtmd3BJA6j?p=preview的简单示例。

使用angular $ http请求查找特定的数组值

1 个答案: