0

好的，我有一个复选框列表显示我的项目中的角色数据。为了检索这些角色，我在下面这样做：

$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);
        }
    });
}

...但我无法在表单上选择正确的角色。

第一：如何获得具有某些计算属性或其他内容的选定角色？

第二：接收这个选定角色的正确参数是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. 您传递给操作的整数数组是所选角色 ID 的数组
于 2013-10-14T03:53:36.083 回答
0

我假设你想做一个标准的、非 ajax 表单提交并点击一个 MVC 控制器操作。如果是这种情况，请将您的复选框标记更新为：

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

然后将其全部包装在一个表单标记中，其动作属性指向一个动作方法，该方法具有一个名为“roles”的类型为 int[] 的单个参数。

更新：

@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 回答