AngularJs+TypeScript:-如何在ng-select中获取选中的索引值

Question

我正在开发一个模块，在该模块中，我检查了面板可见性的条件，就好像下拉列表的选定索引不等于 0 或 -1 一样，否则它将不会对我的面板可见。我对如何使用 ng-select 获取下拉列表的选定索引值感到有些困惑。我在下面显示了我的下拉代码：-

 <div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom"  ng-init= getFormData(); >
<table>
<tr>
     <td>                                             
     <select id="accountselector" style="width: 100%;">
     <option value="0">--- Select an option ---</option>
    <option data-ng-repeat="acnt in listAccountTypes" value="{{acnt.id}}">{{acnt}}</option>
    </select>
    </td></tr>
</table>
</div>

这是我的打字稿控制器

/// <reference path="../interface/interface.ts" />
/// <reference path="../../scripts/typings/jquery/jquery.d.ts" />
/// <reference path="../../scripts/typings/angularjs/angular.d.ts" />

module CustomerNew.controllers {
    export class CreateCustomerCtrl {
        static $inject = ['$scope', '$http', '$templateCache'];
        constructor(protected $scope: ICustomerScope,
            protected $http: ng.IHttpService,
            protected $templateCache: ng.ITemplateCacheService) {
            $scope.getFormData = this.getFormData;
        }
           public getFormData = (getFormData: any) => {
            this.$http.get(doAccountTypeUrl).
                success((data, status, headers, config) => {
                this.$scope.listAccountTypes = data["AccountCodesDisplayTypes"];
            }).
                error((data, status) => {
                debugger;
                console.log("In Error:-Request Failed");
                alert(status);
            });
        }  
    }
    var customerapp = angular.module("CustomerNew", []);
    customerapp
      .controller('CreateCustomerCtrl', CustomerNew.controllers.CreateCustomerCtrl);
    var doAccountTypeUrl = '/API/Create/GetLoadData';
}
</Controller>

我必须检查的条件：

if (listAccountTypes.SelectedIndex > -1 && listAccountTypes.SelectedValue != "0")
 {
 IntlCountryAddres objIntlCountryAddres = objIntlCountryAddressController.GetByCountryId(Convert.ToInt32(listAccountTypes.SelectedValue));
 if (objIntlCountryAddres != null && objIntlCountryAddres.id > 0)
    {
       pnlBillingCountry.Visible = true;
       LoadBillingInfo(objIntlCountryAddres);
    }
     }
 else
    {
      pnlBillingCountry.Visible = false;
    }

注意：-我在页面加载时检查这个条件 我正在获取以下格式的数据：-

Answer 1

没有选项内联：

<select id="accountselector" style="width: 100%;">
 <option value="0">--- Select an option ---</option>

改为使用ng-options 和ng-model：

<select id="accountselector" style="width: 100%;" ng-options="check docs" ng-model="check docs"></select>

查看文档：https://docs.angularjs.org/api/ng/directive/ngOptions

Answer 2

我更新了我们的plunkers with the above code 之一（来自here）。首先，这将是我们返回的数据文件 - API/Create/GetLoadData.json：

{
  "AccountCodesDisplayTypes" : 
  {
      "1": "Code Only",
      "2": "Code and Description",
      "3": "Description Only",
      "N": "no"
  }
}

这里是一个稍微调整的控制器（使用上面的 json 并通过 getter 使用现有模块）

module CustomerNew.controllers {
    export class CreateCustomerCtrl {

        static $inject = ['$scope', '$http', '$templateCache'];

        constructor(protected $scope: ICustomerScope,
            protected $http: ng.IHttpService,
            protected $templateCache: ng.ITemplateCacheService) {
            $scope.getFormData = this.getFormData;
        }
           public getFormData = (getFormData: any) => {

            this.$http
                .get(doAccountTypeUrl)
                .success((data, status, headers, config) => {
                this.$scope.listAccountTypes = data["AccountCodesDisplayTypes"];
            }).
                error((data, status) => {
                debugger;
                console.log("In Error:-Request Failed");
                alert(status);
            });
        }  
    }
    //var customerapp = angular.module("CustomerNew", []); 
    var customerapp = angular.module("CustomerNew"); 
    customerapp
      .controller('CreateCustomerCtrl', CustomerNew.controllers.CreateCustomerCtrl);
    var doAccountTypeUrl = 'API/Create/GetLoadData.json';
}

使用模块 getter 的原因是 - CustomerNew 模块在别处定义...作为主模块的一部分。

最后这是一点点调整的HTML sn-p：

<div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom" ng-init=getFormData();>
    <table> 
      <tr>
        <td>
          <select id="accountselector" style="width: 100%;">
            <option value="0">--- Select an option ---</option>
            <option data-ng-repeat="(key, value) in listAccountTypes" value="{{key}}">{{key}} - {{value}}</option>
          </select>
        </td>
      </tr>
    </table>
</div>

我们大多使用 key, value 来消费我们的 json （我尝试使用与上面错误消息中的相同）

查看here

Answer 3

所以，有工作 ng-repeat 和选择/选项为 described here。

首先，我们将使用 Model = {} 对象扩展我们的 $scope：

constructor(protected $scope: ICustomerScope,
    protected $http: ng.IHttpService,
    protected $templateCache: ng.ITemplateCacheService) {
    $scope.getFormData = this.getFormData;

    $scope.Model = { selectedValue : "0" };
}

我们可以像这样更改 html sn-p，以在我们的模型 selectedValue 中获得 selected "key"（这里是 updated plunker）：

<div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom" 
      ng-init="getFormData();">
    <table> 
      <tr>
        <td>
          <select id="accountselector" style="width: 100%;" ng-model="Model.selectedValue">
            <option value="0" >--- Select an option ---</option>
            <option data-ng-repeat="(key, value) in listAccountTypes" 
                    value="{{key}}">{{key}} - {{value}}</option>
          </select>
        </td>
      </tr>
    </table>
    Selected value: {{Model.selectedValue}}
</div>

最重要的变化是引入 ng-model

...<select id="accountselector" style="width: 100%;" ng-model="selectedValue">

查看here

如果我们想知道所选值的INDEX，我们可以使用angular内置计数器$index，检查它here in this fork，这将是调整的部分：

<select id="accountselector" style="width: 100%;" ng-model="Model.selectedValue">
    <option value="0" >--- Select an option ---</option>
    <option data-ng-repeat="(key, value) in listAccountTypes" 
            value="{{$index + 1}}">{{key}} - {{value}}</option>
</select>