Angularjs условие гонки ng-repeat в настройке раскрывающегося списка

У меня возникла проблема с получением данных о ресурсах из API, загрузкой их в раскрывающийся список и установкой выбранного значения раскрывающегося списка. В основном он пытался установить значение раскрывающегося списка до его заполнения. У меня есть два разных способа сделать это, но мне было интересно, есть ли у кого-нибудь «лучший» способ или способ «лучшей практики». Вот два моих пути.

Вариант 1: директива, прикрепленная к элементу ng-repeat

Контроллер

$scope.users = User.query();
$scope.dude={
    name: "Dude",
    id: 3
}

HTML

<select id="userSelect" ng-show="users.length">
    <option ng-repeat="user in users" choose dude="dude">{{user.username}}</option>
</select>

Директива

.directive('choose', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            if (scope.user) {
                if (scope.user.id === scope.dude.id) {
                    $("#userSelect").val(element.val());
                }
            }
        }
    }
});

Вариант 2: следите за изменением длины пользователей (вызов возвращается, и раскрывающийся список заполняется)

Контроллер

$scope.users = User.query();
$scope.dude={
    name: "Dude",
    id: 3
}
$scope.$watch('users.length', function() {
    $("#userSelect").val($scope.dude.id);
});

HTML

<select id="userSelect" ng-show="users.length">
    <option ng-repeat="user in users" value="{{user.id}}>{{user.username}}</option>
</select>

Любые мнения о том, какой из них лучше практиковать? Или если есть другой лучший способ?


angularjs angularjs-directive angularjs-ng-repeat
person Zack Argyle    schedule 02.08.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Итак, промисы — ваш друг для такого рода вещей. Я собираюсь использовать $http вместо ресурсов, потому что я более знаком с этим, но я почти уверен, что последняя версия ресурсов возвращает обещания (или может).

Также .. нет jquery в ваших контроллерах. Используйте такие директивы, как ng-model, для изменения входных значений.
Кроме того, использование ng-options для заполнения параметров для выбора более эффективно, чем использование ng-repeat для элемента «option».

Вот как выглядит большая часть моего кода (за исключением того, что здесь я использую jsonp, а не просто get). http://jsfiddle.net/HB7LU/142/

КОНТРОЛЛЕР:

function MyCtrl($scope, $http) {
    // The id we want to select when the data loads:
    var desiredId = 3;

    // Overly complicated $http request so that I can load with jsonp:
    // You could normally use just $http.get()
    $scope.users = $http.jsonp('http://www.json-generator.com/j/geku?callback=JSON_CALLBACK').then(function(d) { return d.data.result; });

    // Use the returned promise to set the selection when the data loads:
    // I'm using the "underscore" library function "findWhere" to set my
    // model to the object I want selected:
    $scope.users.then(function(d) {
        $scope.uservalue = _.findWhere(d,{id:desiredId});
    });

}

HTML:

<div ng-controller="MyCtrl">  
    {{uservalue | json}}
    <select ng-model="uservalue" ng-show="users.length" ng-options="user.name for user in users">
    </select>
</div>
person Karen Zilles    schedule 02.08.2013
comment
Мне это нравится. Установка переменной области видимости в обратном вызове имеет больше смысла. Я люблю, когда все усложняю. Спасибо чувак. - person Zack Argyle; 02.08.2013