Используя запрос угловую $ HTTP, чтобы найти конкретное значение массива

Question

Я использую Угловой сделать HTTP GET запроса $ для некоторых данных (я удалил URL, чтобы сделать его легче читать здесь):

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; 

    }); 

}]); 

Said данные всегда случайны и организовано так:

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

Я пытаюсь понять, как добавить specfic классы 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 для простого примера.