JSFiddle - React, Tailwind, and code Playground

by vvakame

HTML

<div ng-app>
    <div ng-controller="UserController">
        ユーザ一覧
        <div ng-repeat="user in userList">
            {{user}}
        </div>
    </div>
    
    <div ng-controller="SelectController">
        ユーザ選択
        <div ng-controller="UserController">
            <div ng-repeat="user in userList">
                <input
                    type="checkbox" 
                    ng-model="selectedStateList[$index]" 
                    ng-change="changeSelection($index, user)">
                {{user}}
            </div>
            {{message}}<br>
            <button ng-click="show()">選択してるユーザを表示</button>
        </div>
    </div>
</div>

JavaScript

function SelectController($scope) {
    $scope.selectedStateList = [];
    $scope.selectedDataList = [];
    $scope.changeSelection = function(index, data) {
        if ($scope.selectedStateList[index]) {
            $scope.selectedDataList[index] = data;
        } else {
            $scope.selectedDataList[index] = null;
        }
    };
    $scope.show = function() {
        var message = "selected " + $scope.selectedDataList.join(",");
        $scope.message = message;
    };
}

function UserController($scope) {
    $scope.userList = [
        "vvakame", "sys1yagi", "kojira", "neco"
    ];
}