正在学习 angular，在使用 ng-options 时遇到问题

Question

我正在自学 angular 但卡住了。

我有一个简单的html。第

页

    <!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>shows tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="main.ctrl.js"></script>
</head>

<body ng-app="app" ng-controller="MainController as main">

<style>
.show_container {margin-bottom: 40px;}
.shows_list{padding: 20px 0;}
</style>

<div class="container">

    <h1>{{main.title}}</h1>

    <div class="row">
        <div class="input-group">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-search"></span>
            </span>
            <input type="text" class="form-control" ng-model="main.searchInput">
        </div>
    </div>

    <div class="row show_container">
        <div class="col-lg-12"><h3>A list of TV shows</h3></div>
        <div class="col-lg-12">
            <div class="col-lg-6 shows_list" ng-repeat="show in main.shows | filter:main.searchInput">
                <h4>{{show.title}} </h4> 
                <span>{{show.year}}</span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <select class="form-control pull-right" ng-model="main.shows" ng-options="genre as show.genre for show in main.shows" ></select>
        </div>
    </div>

</div>

</body>

</html>

我的app.js文件

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

我有一个控制器设置了一些数据

angular.module('app')
.controller("MainController", function(){

    var vm = this;

    vm.title = 'AngularJS Tutorial Example';
    vm.searchInput = '';

    vm.shows = [
        {
            title: 'Game of Thrones',
            year: 2011,
            genre: 'Drama',
            favorite: true
        },
        {
            title: 'Walking Dead',
            year: 2010,
            genre: 'Suspense',
            favorite: true
        },
        {
            title: 'Firefly',
            year: 2002,
            genre: 'Drama',
            favorite: true
        },
        {
            title: 'Banshee',
            year: 2013,
            genre: 'Suspense',
            favorite: true
        },
        {
            title: 'Greys Anatomy',
            year: 2005,
            genre: 'Drama',
            favorite: false
        }
    ];
});

这就是我卡住的地方。 1.) 在我的 ng-options 中，当我进行选择时，值会消失。 2.) 我不知道如何分组 "genres" 3.) 虽然搜索输入会优化搜索，但我更希望从 ng-options 选择中获得值 return..

我完全被困住了，一直在寻找 google 寻求帮助。虽然我发现使用 $scope 有很多问题，但我想尝试坚持使用它。

Answer 1

ng-model 应该是您存储选择的变量：

    vm.selectedValue='';

在控制器和模板中：

    <select class="form-control pull-right" ng-model="main.selectedValue" ng-options="show.title group by show.genre for show in main.shows" ></select>

Answer 2

创建 selection 时值会消失，因为您的 ng-model 必须分配给其他变量，而不是整个显示数组。

这是一个可以使用你的例子的 plunker：http://plnkr.co/edit/ypU7xqfoeHHspHLvDiz7?p=preview

我创建了一个 searchInput，其中 ng-model="main.searchInput.genre" 用于您的 select 标签。

这是一个根据您的节目创建流派列表的功能：

      vm.genres = [];

      vm.shows.forEach(function(element){
        if (vm.genres.indexOf(element.genre) == -1) {
          vm.genres.push(element.genre);
        }
      });

如果您想更多地了解 ng-options 和 select，这里有 3 个不同用途的示例：http://plnkr.co/edit/Xc8Qrcr0AN4I2U0chbye?p=info

正在学习 angular，在使用 ng-options 时遇到问题

learning angular, having issues with ng-options

angularjs

ng-options