Question

Angular JS新手，

我尝试使用来自Web服务的数据定义下拉列表的自定义指令。

现在尝试使用一些静态数据但不能正常工作。

app.directive("deviceBranch", function(){
    return {
        templateUrl : 'resources/view/template/device-branch-list.html',
        controller : function($scope) {
            $scope.listBranch = [{
                deviceBranchId:"id1",
                deviceBranchName:"value1"
            },{
                deviceBranchId:"id2",
                deviceBranchName:"value2"
            },{
                deviceBranchId:"id3",
                deviceBranchName:"valkue3"
            }]
        }
    }
});

添加＆＃34;选择＆＃34;在模板中 -

ng-options="service.deviceBranchId as service.deviceBranchName for service in listBranch"

这就是我使用指令

的方式

<device-branch></device-branch>

选择已填充，但没有可用选项。

请协助。

Answer 1

您的模板中似乎缺少ng-model。以下是工作样本的链接。

<select ng-options="service.deviceBranchId as service.deviceBranchName for service in listBranch" ng-model="selected"></select>

您还可以将$ http注入您的指令以从Web服务获取数据。

app.directive("deviceBranch", function($http){
  return {
    templateUrl : 'device-branch-list.html',
    scope: {
      ngModel: '='
    },
    controller : function($scope) {
        $scope.listBranch = [{
            deviceBranchId:"id1",
            deviceBranchName:"value1"
        },{
            deviceBranchId:"id2",
            deviceBranchName:"value2"
        },{
            deviceBranchId:"id3",
            deviceBranchName:"valkue3"
        }]
    },
    link: function($scope, element, attrs){
      //var url = ""
      //$http.get(url).then(function(response){
      // $scope.listBranch = response;
      //})
    }
  }
});

这是模板（device-branch-list.html）：

<select ng-options="service.deviceBranchId as service.deviceBranchName for service in listBranch" ng-model="ngModel">

https://plnkr.co/edit/essg24GsrhSKwqXO578p?p=preview

主数据的Angular Js自定义指令下拉列表

1 个答案: