0

我正在开发一个模块，在该模块中我检查了面板可见性的条件，就好像下拉列表的选定索引不等于 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;
    }

注意：-我在页面加载时检查此条件我正在获取以下格式的数据：- 在此处输入图像描述

4

3 回答 3

1

没有选项内联：

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

而是使用ng-optionsand 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

于 2015-07-08T09:15:41.900 回答
1

我用上面的代码（原文来自这里）更新了我们的一个plunker 。首先，这将是我们返回的数据文件 - ：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（我尝试使用与上面错误消息中相同的方法）

在这里检查

于 2015-07-08T11:31:54.213 回答
1

因此，按照此处所述ng-repeat进行工作和选择/选项。

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

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

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

我们可以像这样更改 html 片段，以便在我们的模型中被选中 （这里是更新的 plunker）："key"selectedValue

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

在这里检查

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

<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>
于 2015-07-08T14:00:44.117 回答