AngularJs+TypeScript:-如何在 ng-select 中获取 selected 索引值
AngularJs+TypeScript:-How to get the selected index value in ng-select
我正在处理模块,在该模块中我检查了面板可见性的条件,就好像下拉列表的选定索引不等于 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;
}
注意:-我在页面加载时检查此条件
我正在获取以下格式的数据:-
没有内联选项:
<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>
我更新了我们的 plunkers with the above code (original from ) 之一。首先,这将是我们返回的数据文件 - 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>
大多数情况下我们使用键值来消费我们的json(我尝试使用与上面错误消息中相同的方法)
检查一下here
因此,将 ng-repeat
和 select/option 作为 工作。
首先,我们将使用 Model = {}
对象扩展我们的 $scope:
constructor(protected $scope: ICustomerScope,
protected $http: ng.IHttpService,
protected $templateCache: ng.ITemplateCacheService) {
$scope.getFormData = this.getFormData;
$scope.Model = { selectedValue : "0" };
}
我们可以像这样更改 html 片段,以便在我们名为 selectedValue
的模型中选择 "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
如果我们想知道所选值的索引,我们可以使用 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>
我正在处理模块,在该模块中我检查了面板可见性的条件,就好像下拉列表的选定索引不等于 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;
}
注意:-我在页面加载时检查此条件
我正在获取以下格式的数据:-
没有内联选项:
<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>
我更新了我们的 plunkers with the above code (original from 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>
大多数情况下我们使用键值来消费我们的json(我尝试使用与上面错误消息中相同的方法)
检查一下here
因此,将 ng-repeat
和 select/option 作为
首先,我们将使用 Model = {}
对象扩展我们的 $scope:
constructor(protected $scope: ICustomerScope,
protected $http: ng.IHttpService,
protected $templateCache: ng.ITemplateCacheService) {
$scope.getFormData = this.getFormData;
$scope.Model = { selectedValue : "0" };
}
我们可以像这样更改 html 片段,以便在我们名为 selectedValue
的模型中选择 "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
如果我们想知道所选值的索引,我们可以使用 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>