0

OK、プロジェクトの役割データを示すチェックボックス リストがあります。これらの役割を取得するために、以下でこれを行っています。

$scope.Roles = [];
$scope.init = function() {

    $.get('/Navigation/NavigationNewDependencies', {}, function(result) {

        for (var I = 0; I < result.Roles.length; ++I) {

            var splited = result.Roles[I].split(";");
            $scope.Roles.push({ id: splited[0], name: splited[1], checked: false });
        }

        $scope.$apply();
    });
}

そして、このように示します：

<div>
    Roles:
    <ul data-ng-repeat="role in Roles">
        <li><input type="checkbox" data-ng-model="role.checked" />{{role.name}}</li>
    </ul>
</div>

わかりました、正常に動作します。フォームでこれらのチェックされたロールをアクションに送信したいのですが、わかりますか? どうすればいいですか？

以下のように POST を実行しようとしています。

$scope.getSelectedRoles = function () {

    var selectedRoles = [];
    for (var I = 0; I < $scope.Roles.length; ++I) {
        if ($scope.Roles[I].checked == true) {

            var role = $scope.Roles[I];
            selectedRoles.push({ RoleId: role.id, RoleName: role.name });
        }
    }
    return selectedRoles;
}

$scope.submit = function () {

    $.post('/Navigation/New', {
        title: $scope.model.NavigationName,
        description: $scope.model.NavigationDescription,
        controller: $scope.model.NavigationController,
        action: $scope.model.NavigationAction,
        roles: $scope.getSelectedRoles()
    }, function (result) {

        if (result.IsValid) {
            window.location.href = result.ReturnUrl;
        } else {
            alert(result.Message);
        }
    });
}

...しかし、フォームで適切なロールを選択できません。

最初：計算されたプロパティなどで選択したロールを取得するにはどうすればよいですか?

2 番目: この選択された役割を受け取るための適切なパラメーターはparams int[] roles?

皆さん、ありがとうございました！

4

2 に答える 2

0

このようなもの：

//Ends up being the array of ints for the action.
//You can put this in any event handler you want, like another function attached
//to a ngCLick directive
var selectedRoles = $scope.Roles.filter(function(role) { return role.checked}).
                        .map(function(role) { return role.id});

$.put('/Navigation/NavigationNewDependencies', {roles: selectedRoles})
    .success(function(){//Do something cool on successfully sending to server});

これは、いくつかのことを前提としています。

  1. 「/Navigation/NavigationNewDependencies」アクションは「put」を処理できます
  2. アクションに渡す int の配列は、選択したロール ID の配列です
于 2013-10-14T03:53:36.083 に答える
0

標準の非 ajax フォーム送信を行い、MVC コントローラー アクションを実行する必要があると想定しています。その場合は、チェックボックスのマークアップを次のように更新します。

<input type="checkbox" data-ng-model="role.checked" value="{{ role.id }}" name="roles" />

次に、int[] 型の「roles」という名前の 1 つのパラメーターを持つアクション メソッドを指す action 属性を使用して、すべてをフォーム タグでラップします。

更新：

@Kiwanax、これでうまくいくはずです：

角度コントローラー:

function RolesCtrl($scope, $http) {

// use Angular's $http service to communicate with the server
// won't need to call $scope.$apply();

$http.get('/Navigation/NavigationNewDependencies').success(function (result) {
    // try to send json object array from the server (instead of a string)
    $scope.roles = result; 

    // but you don't have control over it, 
    // process your string result the way you are currently doing it 
});

$scope.getSelectedRoleIds = function () {
    var result = [];
    angular.forEach($scope.roles, function (value, key) {
        if (value.checked) result.push(value.id);
    });

    return result;
};

$scope.postData = function () {
    $http.post(
        '/Navigation/New',
        { roles: $scope.getSelectedRoleIds() }
    ).success(function () {
        alert('done'); 
    });
};

}

ビュー ( ng-submit属性を使用して、フォーム送信処理を Angular にオフロードします):

<div ng-app ng-controller="RolesCtrl">

<form ng-submit="postData()">
    <ul data-ng-repeat="role in roles">
        <li><input type="checkbox" ng-model="role.checked"/>{{role.name}}</li>
    </ul>
    <button>submit roles</button>
</form>

MVC コントローラーの (ナビゲーション) アクション:

[HttpPost]
    public ActionResult New(int[] roles)
    {
        // process roles Ids

        return View();
    }
于 2013-10-14T03:54:10.743 に答える