Angular填充数据以下拉

时间:2015-10-06 09:54:50

标签: javascript json angularjs

我有json格式的返回数据,如何使用ng-model将数据作为默认值加载回下拉列表?

<div class="col-md-3 col-md-offset-2">
            <h5 class="over-title">Category</h5>
            <ui-select ng-model="product.categories.selected" theme="bootstrap">
                <ui-select-match placeholder="Select Category" ng-model="product.name">
                    {{$select.selected.name}}
                </ui-select-match>
                <ui-select-choices repeat="item in categories | filter: $select.search">
                    <div ng-bind-html="item.name | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>
        </div>

json如下:

Object { category: "Sightseeing & Tours" }

当有人创建新产品时,当前ng-model=product.name用于填充选项。现在,当他们编辑回表单时,下拉列表应列出以前保存的数据json返回。

创建新产品时下拉列表选项的功能:

$scope.categories = function(){
       Account.getCategoryList()
        .then(function(response){

            $scope.categories = response.data;
        })


        .catch(function(response){
            console.log(response.data.messages);
        });

    };

当有人编辑表单时返回json的那个

$scope.produk = {};
    $scope.getProductToEdit = function(id){
      Account.getProductToEdit(id)
        .then(function(response){

            $scope.produk = response.data.product;
            console.log($scope.produk); ---> Object { category: "Sightseeing & Tours" }
            return $scope.produk;
        })
        .catch(function(response){

        })
    }

新表单模式:

enter image description here

编辑表单模式:

enter image description here

如何在编辑模式下使用json返回的内容替换默认下拉列表。感谢

1 个答案:

答案 0 :(得分:0)

可以使用select-2指令代替使用下拉列表来解决此问题。请参阅以下链接: https://github.com/angular-ui/ui-select2