问题
I m working on module where I have check a condition for the visibility of a panel as if slected index of a dropdown is not equal to 0 or -1 than it will make visible to my panel else it will not. I am bit confused as how to get the selected index value of my dropdown using ng-select. I have shown my dropdown code below:-
<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>
Here is my typescript controller
/// <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>
Condition Which i have to check:
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;
}
Note:-I am checking this condition on page load I am getting data in below format:-
回答1:
Don't have the option inline:
<select id="accountselector" style="width: 100%;">
<option value="0">--- Select an option ---</option>
Instead use ng-options and ng-model:
<select id="accountselector" style="width: 100%;" ng-options="check docs" ng-model="check docs"></select>
Check the docs : https://docs.angularjs.org/api/ng/directive/ngOptions
回答2:
I updated one of our plunkers with the above code (original from here). Firstly, this would be our returned data file - API/Create/GetLoadData.json:
{
"AccountCodesDisplayTypes" :
{
"1": "Code Only",
"2": "Code and Description",
"3": "Description Only",
"N": "no"
}
}
And here is a bit adjusted controller (to use above json and consume existing module via 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';
}
The reason for using module getter is - that the CustomerNew module is defined elsewhere... as a part of main module.
Finally this is a bit adjusted HTML snippet:
<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>
Mostly we use key, value to consume our json (I tried to use the same as in the error message above)
Check it here
回答3:
So, having working ng-repeat and select/option as described here.
Firstly we will extend our $scope with a Model = {} object:
constructor(protected $scope: ICustomerScope,
protected $http: ng.IHttpService,
protected $templateCache: ng.ITemplateCacheService) {
$scope.getFormData = this.getFormData;
$scope.Model = { selectedValue : "0" };
}
we can change the html snippet like this, to get selected "key" in our model called selectedValue (here is the 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>
The most important change is introduction of the ng-model
...<select id="accountselector" style="width: 100%;" ng-model="selectedValue">
Check it here
In case, that we would like to know the INDEX of selected value, we can use angular built in counter $index, check it here in this fork, this would be the adjusted part:
<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>
来源：https://stackoverflow.com/questions/31287908/angularjstypescript-how-to-get-the-selected-index-value-in-ng-select