Question

我正在教自己有棱有角，我被卡住了。

我有一个简单的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.）我无法弄清楚如何分组“类型” 3.）虽然搜索输入将改进搜索，但我希望从ng-options选择中返回值。

我完全陷入困境，一直在谷歌寻求帮助。虽然我使用$ scope发现了大量的僵硬，但我想继续坚持下去。

学习角度，有ng-options的问题

0 个答案: