teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

a

2016/11/02 03:55

投稿

pinpikokun
pinpikokun

スコア376

answer CHANGED
@@ -24,7 +24,7 @@
24
24
  }
25
25
 
26
26
  // 選択状態解除
27
- $scope.crearLocation = function(){
27
+ $scope.clearLocation = function(){
28
28
  $scope.location = '';
29
29
  }
30
30
 
@@ -39,7 +39,7 @@
39
39
  <option value="東京">東京</option>
40
40
  <option value="その他関東地区">その他関東地区</option>
41
41
  </select>
42
- <button ng-click="crearLocation()">未選択</button>
42
+ <button ng-click="clearLocation()">未選択</button>
43
43
  </div>
44
44
  </body>
45
45
  </html>

1

a

2016/11/02 03:55

投稿

pinpikokun
pinpikokun

スコア376

answer CHANGED
@@ -4,4 +4,43 @@
4
4
 
5
5
  以下のサンプルは複数選択して別の箇所をクリックしたときも$scope.locationの中身は失われていないように見えます.
6
6
 
7
- [リンク](http://plnkr.co/edit/8GhnFmxNRvtJCGOyLUKg?p=preview)
7
+ [リンク](http://plnkr.co/edit/8GhnFmxNRvtJCGOyLUKg?p=preview)
8
+
9
+ 上記リンク先を以下に変更しました。
10
+
11
+ ```html
12
+ <html>
13
+ <head>
14
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
15
+
16
+ <script>
17
+ angular.module('App', []).controller('formController', ['$scope', function($scope) {
18
+ // 初期値はブランク
19
+ $scope.location = '';
20
+
21
+ // bindは条件で分岐
22
+ $scope.selectedLocation = function(){
23
+ return $scope.location === '' ? '旅行地を選択' : $scope.location;
24
+ }
25
+
26
+ // 選択状態解除
27
+ $scope.crearLocation = function(){
28
+ $scope.location = '';
29
+ }
30
+
31
+ }]);
32
+ </script>
33
+ </head>
34
+ <body ng-app="App">
35
+ <div ng-controller="formController">
36
+ <div class="sel1" ng-bind="selectedLocation()"></div>
37
+ <select class="op1" multiple size="2" ng-model="location">
38
+ <option value="" disabled>旅行地を選択</option>
39
+ <option value="東京">東京</option>
40
+ <option value="その他関東地区">その他関東地区</option>
41
+ </select>
42
+ <button ng-click="crearLocation()">未選択</button>
43
+ </div>
44
+ </body>
45
+ </html>
46
+ ```