如何使用 AngularJS ng-model 更新 Html.CheckBoxFor？答案

【问题标题】：How does on update Html.CheckBoxFor using AngularJS ng-model?如何使用 AngularJS ng-model 更新 Html.CheckBoxFor？
【发布时间】：2017-02-28 16:34:44
【问题描述】：

我正在使用 asp.net MVC 5 并正在使用 Html.CheckBoxFor 制作一个复选框。

<div class="col-md-6">
    @Html.CheckBoxFor(m => m.active, new { 
        @class = "form-control populate", @id = 'EditActive',
        @ng_model = "editFormData.active"
    })
</div>

当我在 ajax 调用后设置 angularjs editFormData 时，当我将其作为 {{ editFormData }} 输出到屏幕时该值是正确的，但复选框未显示为已选中。

datatableApp.controller('EditFormController', ['$scope', '$http', function($scope, $http) {
    $scope.getEditStreet = function(streetID) {
        $http.post('@Url.Action(Model.GetFormControllerFunctionName, Model.GetFormControllerName)', "{ @Model.JavascriptEditPropertyName : " + streetID + "}").then(function(response) {
                alert("success");
                $scope.editFormData = response.data.ResultObject;
            },
            function(response) {
                alert("fail" + response.statusText);
            });
    };
}]);

结果对象包含一个正确显示为真或假的活动字段。

如何让剃刀版本的复选框进行检查？

【问题讨论】：

你如何设置$scope.editFormData 值？是否要在 AJAX 回调后设置 active: true（最好同时显示 editFormData 和 AJAX 回调代码）？
@TetsuyaYamamoto 我用 angularjs 更新了问题。结果对象内部是一个名为 active 的属性。
response.data.ResultObject 的外观如何（我认为它在 POST 后返回 JSON 对象）？尝试结果数据序列化以显示ng-model 中的active 属性值：$scope.editFormData = @Html.Raw(JsonConvert.SerializeObject(response.data.ResultObject)); 或JSON.stringify，如果角度控制器放置在单独的 JS 文件中。

标签： javascript c# angularjs asp.net-mvc razor

【解决方案1】：

我想通了。显然，当您在某些情况下修改某些值时，您需要有 $scope.apply()。不确定所有这些情况是什么，但我添加了它，它现在运行良好。

datatableApp.controller('EditFormController', ['$scope', '$http', function($scope, $http) {
    $scope.getEditStreet = function(streetID) {
        $http.post('@Url.Action(Model.GetFormControllerFunctionName, Model.GetFormControllerName)', "{ @Model.JavascriptEditPropertyName : " + streetID + "}").then(function(response) {
                alert("success");
                $scope.editFormData = response.data.ResultObject;
                $scope.$apply();
            },
            function(response) {
                alert("fail" + response.statusText);
            });
    };
}]);

【讨论】：