Question

我遇到了从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>

对哪一个更好的做法有任何意见？或者，如果还有其他更好的方法吗？

Answer 1

所以，承诺是你这种事情的朋友。我将使用$ http而不是资源，因为我对它更熟悉，但我很确定最近的版本资源返回承诺（或可以）。

此外..您的控制器中没有jquery。使用ng-model等指令来更改输入值同样使用ng-options填充选项的选项比在“option”元素上使用ng-repeat更强大。

这是我的很多代码的样子（除了我在这里使用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>

设置下拉值时的Angularjs ng-repeat竞争条件

1 个答案: