选择输入上的 AngularJS ng-model 不起作用答案

【问题标题】：AngularJS ng-model on select input doesn't work选择输入上的 AngularJS ng-model 不起作用
【发布时间】：2019-04-20 09:28:54
【问题描述】：

我从 AngularJS 开始，并尝试用 Angular 做一个并获得它的价值，但它不起作用。

<div id="app_container" ng-controller="ArticlesController as control">
<select name="sortby" id="sortby" ng-model="sortBy"> {{sortBy}}
    <option name="Date" value="Date">Date</option>
    <option name="Vues" value="Vues">Vues</option>
    <option name="Note" value="Note">Note</option>
    <option name="Catégorie" value="Catégorie">Catégorie</option>
    <option name="Tags" value="Tags">Tags</option>
</select>
<div>

这里我想显示选择输入的值，但它什么也没显示。我也不能从控制器访问这个值，我也不明白为什么。我在同一页面上有一个 ng-repeat，效果很好。我什至试图从 angularjs.org 复制过去的示例，即使这不起作用...

【问题讨论】：

你必须使用 ng-repeat 或 ng-options 才能工作。

标签： javascript angularjs select angular-ngmodel

【解决方案1】：

由于您使用控制器作为语法，您需要使用 ng-model="controlsortBy"

演示

var app = angular.module('testApp',[]);
app.controller('ArticlesController',function(){
   var control = this;
   control.print = function(){
     console.log(control.sortBy);
   }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp">
<div id="app_container" ng-controller="ArticlesController as control">
<select name="sortby" id="sortby" ng-change="control.print()" ng-model="control.sortBy">
    <option name="Date" value="Date">Date</option>
    <option name="Vues" value="Vues">Vues</option>
    <option name="Note" value="Note">Note</option>
    <option name="Catégorie" value="Catégorie">Catégorie</option>
    <option name="Tags" value="Tags">Tags</option>
</select>
<h1> {{control.sortBy}}</h1>
<div>

【讨论】：

谢谢，我在控制台中有正确的结果。这是一个进步。但是 {{sortBy}} 仍然不起作用
你需要使用 {{control.sortBy}}