Q&A
セレクトボックスが２つあり、１つ目を選択したら２つ目のセレクトボックスの表示が反映され、両方scopeのidをserverに送るにはどうすればいいでしょうか。よろしくお願いいたします。
$scope.projects の clientid と $scope.clientsの id は紐づいているデータになっています。
表示結果は以下のようにしたいです。
<セレクトボックス１つ目>
-DOT INC
-Jenny's Cafe
-Flower Shop
-A MART
<セレクトボックス２つ目> ("DOT ING"を選択した場合以下を表示)
CHAT WEBSITE : level3
CHAT WEBSITE : level4
<セレクトボックス２つ目>("Jenny's Cafe"を選択した場合以下を表示)
BLOG : level1
SHOPPING WEBSITE : level3
LOGIN SITE : level3
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <div ng-controller="Controller"> <select ng-model="project.clientid" ng-options="project.name for project in projects"> </select> <select ng-model="clients.id" ng-if="project.clientid" ng-options="clients.id as clients.name for clients in clients"> </select> </div> <script> function Controller($scope) { $scope.projects = [ {id: 1, name: "CHAT WEBSITE", detail: "level3", clientid: 1, duedate: 2017-01-01}, {id: 2, name: "CHAT WEBSITE", detail: "level4", clientid: 1, duedate: 2017-02-01}, {id: 3, name: "BLOG", detail: "level1", clientid: 2, duedate: 2017-05-01}, {id: 4, name: "SHOPPING WEBSITE", detail: "level3", clientid: 2, duedate: 2017-07-01} {id: 4, name: "LOGIN SITE", detail: "level3", clientid: 2, duedate: 2017-07-01} {id: 4, name: "SNS", detail: "level5", clientid: 4, duedate: 2017-08-01} {id: 4, name: "BLOG", detail: "level2", clientid: 3, duedate: 2017-09-01} ]; $scope.clients = [ {id: 1, name: "DOT INC", address: "NEW YORK"}, {id: 2, name: "Jenny's Cafe", address: "ATLANTA"}, {id: 3, name: "Flower Shop", address: "TOKYO"}, {id: 4, name: "A MART", address: "HONG KONG"} ]; } angular.module('app', []) .controller('CartController', CartController); </script> </body> </html>
回答1件
0
ベストアンサー
以下のような感じでどうでしょうか。
html
1<html ng-app="myApp"> 2<head> 3<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 4 5<script> 6 angular.module('myApp', []).controller('MyController', function($scope) { 7 8 $scope.clients = [ 9 {id: 1, name: "DOT INC", address: "NEW YORK"}, 10 {id: 2, name: "Jenny's Cafe", address: "ATLANTA"}, 11 {id: 3, name: "Flower Shop", address: "TOKYO"}, 12 {id: 4, name: "A MART", address: "HONG KONG"} 13 ]; 14 15 var projectOptions = [ 16 {id: 1, name: "CHAT WEBSITE", detail: "level3", clientid: 1, duedate: 2017-01-01}, 17 {id: 2, name: "CHAT WEBSITE", detail: "level4", clientid: 1, duedate: 2017-02-01}, 18 {id: 3, name: "BLOG", detail: "level1", clientid: 2, duedate: 2017-05-01}, 19 {id: 4, name: "SHOPPING WEBSITE", detail: "level3", clientid: 2, duedate: 2017-07-01}, 20 {id: 4, name: "LOGIN SITE", detail: "level3", clientid: 2, duedate: 2017-07-01}, 21 {id: 4, name: "SNS", detail: "level5", clientid: 4, duedate: 2017-08-01}, 22 {id: 4, name: "BLOG", detail: "level2", clientid: 3, duedate: 2017-09-01} 23 ]; 24 25 $scope.projects = function(){ 26 return $scope.selectedClient ? projectOptions : []; 27 } 28 }); 29</script> 30 31</head> 32<body ng-controller="MyController"> 33 <select ng-model="selectedClient" ng-options="client.name for client in clients"> 34 <option value="">--</option> 35 </select> 36 <select ng-model="selectedProject" ng-options="project.name for project in projects() | filter:{clientid:selectedClient.id}"> 37 <option value="">--</option> 38 </select> 39</body> 40</html>
選択した値をサーバに送信する場合、以下の値を使用します。
javascript
1$scope.selectedClient.id; 2$scope.selectedProject.id;
投稿2017/01/19 03:21
編集2017/01/19 03:27
総合スコア376
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/22 03:12