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;
    }

注意： - 我正在检查页面加载时的这种情况我收到以下格式的数据： - enter image description here

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代码段：

<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代码段，在名为 "key" 的模型中获取选中 selectedValue（这里是{{3 }}）：

<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">

检查updated plunker

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

<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>

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

3 个答案: