JSFiddle - React, Tailwind, and code Playground

by busyoumono99

HTML

<h1>AngularJSの練習</h1>
 <div ng-app>
    <div ng-controller="mainCtrl">
    <form novalidate name="myForm" >
    <p>Group:
    <select ng-model="group" ng-options="g.TargetType.name for g in groups.target_list" ng-change="change()">
        <option value="">-- chose group --</option>
    </select>
    </p>
    <p>User:
    <select ng-model="user" ng-options="u.name for u in listUsers">
        <option value="">-- chose user --</option>
    </select>
    </p>
    </form>
    <pre>グループ名 : {{group.name}}</pre>
    <pre>ユーザー名 : {{user.name}}</pre>
     </div>
</div>

JavaScript

var mainCtrl = function($scope) {
    $scope.groups={"target_list":[
    {"TargetType":{"id":"115","name":"\uff0b\u5375(\u30c6\u30af\u30cb\u30ab\u30eb)","memo":""}}
    ,{"TargetType":{"id":"116","name":"\u73cd\u5ba2","memo":""}}
    ,{"TargetType":{"id":"120","name":"\u30a2\u30f3\u30b1\u30fc\u30c81:\u95c7\u9b54\u5263\u58eb","memo":"Dungeon.id=70"}}
    ,{"TargetType":{"id":"121","name":"\u30a2\u30f3\u30b1\u30fc\u30c82:\u5149\u9b54\u5263\u58eb","memo":"Dungeon.id=71"}}
    ,{"TargetType":{"id":"122","name":"\u30a2\u30f3\u30b1\u30fc\u30c83:\u5ca9\u9b54\u5263\u58eb","memo":"Dungeon.id=72"}}
    ,{"TargetType":{"id":"123","name":"\u30a2\u30f3\u30b1\u30fc\u30c84:\u30ca\u30fc\u30ac","memo":"Dungeon.id=102,"}}
    ,{"TargetType":{"id":"126","name":"\u95c7\u306e\u6b74\u9f8d","memo":"Dungeon.id=103"}}
    ,{"TargetType":{"id":"127","name":"\u7114\u306e\u6a5f\u68b0\u9f8d","memo":"Dungeon.id=63"}}
    ,{"TargetType":{"id":"128","name":"\u30dd\u30ea\u30f3\u306e\u5854 ","memo":"Dungeon.id=82"}}
    ,{"TargetType":{"id":"129","name":"\u30d6\u30ec\u30a4\u30ab\u30fc\u30ba","memo":"Dungeon.id=91"}}
    ,{"TargetType":{"id":"130","name":"\u5149\u5c4a\u304b\u306c\u60aa\u9b54\u306e\u5de3 ","memo":"Dungeon.id=89"}}
    ,{"TargetType":{"id":"131","name":"\u30b8\u30e5\u30a8\u30eb\u306e\u5854 ","memo":"Dungeon.id=92"}}
    ]};
    $scope.group = null;
    $scope.users = [
        {"name":"木村","id":"1","group_id":"2"},
        {"name":"草薙","id":"2","group_id":"3"},
        {"name":"中居","id":"3","group_id":"1"},
        {"name":"稲垣","id":"4","group_id":"3"},
        {"name":"香取","id":"5","group_id":"3"},
        {"name":"森","id":"6","group_id":"3"},
        {"name":"坂本","id":"7","group_id":"2"},
        {"name":"長野","id":"8","group_id":"3"},
        {"name":"井ノ原","id":"9","group_id":"3"},
        {"name":"森田","id":"10","group_id":"3"},
        {"name":"三宅","id":"11","group_id":"3"},
        {"name":"岡田","id":"12","group_id":"3"},
    ];
     
    $scope.listUsers = null;
   ...