将我的页面加载到AngularJS(Ngroute)中后，应在下拉中选择值

我正在使用单页角应用程序。我已经在打字稿文件中定义了静态数组。我想将我从地址数组的值绑定到下拉列表（选择控件）。我的TS文件如下。

 let mainAngularModule = angular.module("mm", ['ngMaterial', 'ngRoute']);
    mainAngularModule.config(routeConfig);
    routeConfig.$inject = ['$routeProvider'];
    function routeConfig($routeProvider, $locationProvider) {
        $routeProvider
            .when('/UserDefinedElement', {
                templateUrl: 'LinkType.html',
                controller: 'linktController as LTController'
            })
       .when('/PersonalPreferences', {
            templateUrl: 'PersonalPreference.html',
            controller: 'personalpreferencesController as PPController'
        })
}

我已经在同一TS文件中定义了类，如下所示

class LinkTypeController {
    constructor() {
        $scope.items = [
            { Name: "LinkType1", Address: "NC"},
            { Name: "LinkType2", Address: "NY"}
        ];    
       this.AddressData= [
        { ID: 1, description: "NY" },
        { ID: 2, description: "NC" },
        { ID: 3, description: "SC" },
    ];       
    }
}
mainAngularModule.controller("linktController", LinkTypeController);

我的linkType html代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
        <div class="demo-md-panel-content">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Address</th>
                    </tr>
                </thead>
                <tbody>
                    <tr  ng-repeat="x in items">
                        <td>{{x.Name}}</td>
                        <td>
          <md-select ng-model="selectedAddress" ng-model-options="{trackBy:'$value.ID'}">
                            <md-option ng-value="address" ng-repeat="address in LTController.AddressData track by $index">{{ address.description }}</md-option>
                        </md-select>
                      </td>
                    </tr>
                </tbody>
            </table>
        </div>
        </div>
</body>
</html>

加载我的页面时，我希望从地址数组中选择值。我缺少的东西吗？

<md-select ng-model="x.Address">
    <md-option ng-value="address.description" ng-repeat="address in LTController.AddressData track by $index">{{ address.description }}</md-option>
</md-select>

您的ng-model需要绑定到x.Address，这是数据来自的地方。
ng-model-options - trackBy需要删除，因为我们仅在字符串上进行浅比较。
ng-value选项需要为 address.description，因为这是与 x.Address相匹配的字段。

我包括了一个简单的示例。我不熟悉打字稿，所以我已经使用香草JS写了。

angular.module('test', ['ngMaterial']).controller('TestController', TestController);
function TestController($scope) {
  $scope.items = [
    { Name: "LinkType1", Address: "NC"},
    { Name: "LinkType2", Address: "NY"}
  ];    
  $scope.AddressData = [
    { ID: 1, description: "NY" },
    { ID: 2, description: "NC" },
    { ID: 3, description: "SC" },
  ];
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.js"></script>
<div ng-app='test' ng-controller='TestController'>
  <div ng-repeat='x in items'>
    <div>Name: {{x.Name}}</div>
    <div>
      <md-select ng-model='x.Address' aria-label='address'>
        <md-option ng-value='address.description' ng-repeat='address in AddressData'>{{address.description}}</md-option>
      </md-select>
    </div>
  </div>
</div>

相关内容

最新更新

热门标签：