Question

我正在尝试使用角度js创建一个选择样式的下拉列表。我的直接问题是，一旦用户选择＆＃34;选择＆＃34;，该列表将完全空白。

当我在jsfiddle中运行以下内容时，下拉菜单按预期工作，{{languageList.label}}填充列表中的选定标签。（我看到这是angularjs的旧版本......）

HTML

<div ng-controller="LanguageController">     
    {{message}}
    <select ng-model="languageList" ng-options="language as language.label for language in languages">           
    </select>
    <p>Selected: {{languageList.label}}</p>
<div>

的script.js

var app = angular.module('app', []);

function LanguageController($scope) {
    $scope.message = "Select language: "
    // language options
    $scope.languages = [{
      value: 'eng',
      label: 'English'
    }, {
      value: 'ger',
      label: 'German'
    }, {
      value: 'frc',
      label: 'French (Canada)'
    }, {
      value: 'frf',
      label: 'French (France)'
    }, {
      value: 'ara',
      label: 'Arabic'
    }];    
}

我将这个移植到当前版本的Angular js时遇到了一些困难，但我在Plunker上拼凑了以下内容，尽管下拉菜单填充正确，一旦做出选择，它就会完全空白，而{ {language.label}}不会随着选择而更新。

http://plnkr.co/edit/8v4qin

HTML

<head>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="LanguageController">
    <!--<h1>{{ message }}</h1>-->
    <select name="languageList" ng-model="languages" ng-options="language as language.label for language in languages"></select>
    <h2>Selected Language: {{languageList.label}}</h2>
  </div>
</body>

的script.js

var app = angular.module('app', []);

app.controller('LanguageController', ['$scope', function($scope) {
    //$scope.message = "Please choose a language"
    // language options
    $scope.languages = [{
      value: 'eng',
      label: 'English'
    }, {
      value: 'ger',
      label: 'German'
    }, {
      value: 'frc',
      label: 'French (Canada)'
    }, {
      value: 'frf',
      label: 'French (France)'
    }, {
      value: 'ara',
      label: 'Arabic'
    }];
}]);

这是来自Plunker预览的之前的：

这是在用户选择之后：

选择后，Angularjs中的选择样式下拉列表将消失

0 个答案: