角度jsを使用してコントローラーを介して複数のチェックボックス値を取得してサーバー側(php)に渡す方法

ウダヤラビ

角度jsを使用してコントローラーを介して複数のチェックボックス値を取得してサーバー側(php)に渡す方法。しかし、コンソールエラーなどはスローされませんでした。コードの何が問題なのかわかりません。

    <label ng-repeat="role in roles">
      <input type="checkbox" checklist-model="user.roles" checklist-value="role" ng-change="checkFirst()"> {{role}}
    </label> 



 $scope.roles = [
                    'guest', 
                    'user', 
                    'customer', 
                    'admin'
                  ];
                  $scope.user = {
                    roles: ['user']
                  };

                  $scope.checkFirst = function() {
                    $scope.user.roles.splice(0, $scope.user.roles.length); 
                    $scope.user.roles.push('guest');
                    console.log($scope.user.roles);
                  };
kds

Angularを初めて使用するので、役立つ例をいくつか投稿しましょう。

<div ng-app="checkbox" ng-controller="homeCtrl">
<div ng-repeat="item in list">
    <input type="checkbox" checkbox-group />
    <label>{{item.value}}</label>
</div>{{array}}
<br>{{update()}}

var app = angular.module('checkbox', []);

app.controller('homeCtrl', function($scope) {
    $scope.array = [1, 5];
    $scope.array_ = angular.copy($scope.array);
    $scope.list = [{
        "id": 1,
        "value": "apple",
    }, {
        "id": 3,
        "value": "orange",
    }, {
        "id": 5,
        "value": "pear"
    }];

    $scope.update = function() {
        if ($scope.array.toString() !== $scope.array_.toString()) {
            return "Changed";
        } else {
            return "Not Changed";
        }
    };

})
.directive("checkboxGroup", function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            // Determine initial checked boxes
            if (scope.array.indexOf(scope.item.id) !== -1) {
                elem[0].checked = true;
            }

            // Update array on click
            elem.bind('click', function() {
                var index = scope.array.indexOf(scope.item.id);
                // Add if checked
                if (elem[0].checked) {
                    if (index === -1) scope.array.push(scope.item.id);
                }
                // Remove if unchecked
                else {
                    if (index !== -1) scope.array.splice(index, 1);
                }
                // Sort and update DOM display
                scope.$apply(scope.array.sort(function(a, b) {
                    return a - b
                }));
            });
        }
    }
});

これがあなたに役立つかどうか私に知らせてください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ