Question

我想动态加载API请求中的select元素。

这是我的控制器：

var myApp = angular.module('myApp',[]).controller('tripCtrl', function($scope){

    //Call to API to get people
    $scope.people = [
                            {
                                "id": 1,
                                "name": "Joe Hamlet"
                            },
                            {
                                "id": 2,
                                "name": "Mary Jane"
                            },
                            {
                                "id": 3,
                                "name": "Tom Lee"
                            }
                         ];
    //Call to API to get the element to load
    $scope.selectElement = 
                            {
                                "Options": "person[dynamicValue] as person[dynamicDisplayName] for person in people",
                                "DisplayName": "name",
                                "Value": "id"
                            };


    //Dynamicly load properties
    $scope.dynamicValue = $scope.selectElement.DisplayName;
    $scope.dynamicDisplayName = $scope.selectElement.Value;


 });

HTML：

<select ng-model="selectedPerson" ng-options="{{selectElement.Options}}">
                    <option value="">Select</option>
</select>
{{selectedPerson}}

我创建了一个试图完成此任务的JSFiddle。 http://jsfiddle.net/HB7LU/9493/

我找到了我能够实现的this question，但是当我尝试从Element的Options属性设置ng-options时，无法加载。在检查HTML时，代码看起来设置正确，但模型绑定不起作用。

编辑2014年12月28日：

在原始JS Fiddle中更新Angular版本后，它运行正常，但是当我扩展为使用实际的API时，我发现了动态加载ng-options的另一个问题。以下是JS Fiddle的更深入内容：http://jsfiddle.net/zjFp4/330/

此处还有我更新的控制器。 dataService.getElement（）调用一个硬编码的字符串，其中dataService.getElementFromApi（）只调用json-generator（这是模拟API）调用相同的字符串。当检查从API设置的对象时，一切都在那里，因此它必须是Angular中绑定的问题。关于如何解决这个问题的任何想法？

function tripCtrl($scope, dataService) {

//Call to API to get people
    dataService.getPeople().then(
        function (event) {                
            $scope.people = event;                            
        },
        function (s) { 
            console.log(s); }
        );

    //Call to API to get the element to load
    $scope.selectElement = dataService.getElement();


    dataService.getElementFromApi().then(
        function (event) {                
            $scope.apiElement = event; 
            $scope.dynamicValue = $scope.apiElement.Value;
            $scope.dynamicDisplayName = $scope.apiElement.DisplayName;
        },
        function (s) { 
            console.log(s); }
        );

}

使用Angular从API动态加载ng-options

0 个答案: