ngreact-select/index.html at master · bazoon/ngreact-select · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="node_modules/react-select/dist/default.css">

	<title>Author & Books</title>

</head>
<body>
  <div class="container" ng-controller="pageController as page" style="margin-top: 80px;">
    <h2 class="alert alert-danger" ng-show="page.error" style="text-align: center">{{ page.error }}</h2>

    <div>
      <react-component name="AuthorsSelect"
        props = "page.authorsProps" />
    </div>

    <div>
      <react-component name="BooksSelect"
        props = "page.booksProps" />

    </div>


    <h2 class="alert alert-info" style="text-align: center">{{ page.hint(); }}</h2>


    <div class="row">
      <div class="col-md-2">
        <button ng-click="page.randomSelect()" class="btn btn-primary" type="submit">Мне повезет!
        </button>
      </div>
    </div>

    <br>
    <div class="row">
      <div class="col-md-3">
        <label for="author">Автор</label>
        <select id="author" ng-change="page.authorChanged()" ng-model="page.state.author" ng-options="author.name for author in page.state.authors">
        </select>
      </div>
      <div class="col-md-3">
        <label for="book">Книга</label>
        <select id="book" ng-change="page.bookChanged()" ng-model="page.state.book" ng-options="book.name for book in page.state.books">
        </select>
      </div>

      <div class="col-md-3 well" ng-controller="PopularAuthorsController as popular">
        <h4>Популярные авторы</h4>
        <ul>
          <li ng-repeat="author in popular.popularAuthors">
            <a href="#" ng-click="popular.authorSelected(author)">{{ author.name }}</a>
          </li>
        </ul>

      </div>


    </div>

    <br>


  </div>


</body>

  <script src="node_modules/angular/angular.js"></script>
  <script src="dist/bundle.js"></script>
</html>