Question

在我看来，我有一个<span id="ShowFlag" name="ShowFlag" ng-bind="session.view.showFlag"></span>属性的标记显示正确的布尔值：

public bool ShowFlag { get; set; }

当表单在服务器端发布时，我想将其绑定到相关模型上的属性。

false

但是，这始终返回true，而Span标记中显示的值在页面上正确显示为{{1}}。有什么明显的东西我在这里不见了吗？

Answer 1

我认为您对AngularJs绑定的工作方式缺少了什么。如果你想从服务器获取一个值到角度模型，你可以使用Razor将数据转换为JavaScript（最好的位置在你的Angular控制器中。）

这是我放在一起的快速示例。

这是来自MVC控制器的代码。在这个例子中，我们使用Model数据和ViewBag数据。

public ActionResult Index()
{
    dynamic model = new ExpandoObject();
    model.ShowFlag = "True";

    ViewBag.ShowFlag = "ViewBag True";
    return View(model);
}

这是视图的样子，包括Angular，JQuery以及AngularJs应用程序和控制器的代码参考：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Demo</title>
</head>
<body>
    <div>
        <h2>Sample For Stack Overflow</h2>

        <div ng-app="glennapp">
            <div ng-controller="testController">
                <input type="text" ng-model="showFlag" />
                <input type="text" ng-model="showFlag2" />

                <div>
                    <span ng-bind="showFlag" ></span>
                    <span ng-bind="showFlag2" ></span>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="//code.angularjs.org/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
        var mainApp = angular.module('glennapp', ['glennControllers']);
        var glennControllers = angular.module('glennControllers', []);
        glennControllers.controller('testController', ['$scope', function ($scope) {

            $scope.showFlag = '@ViewBag.ShowFlag';
            $scope.showFlag2 = '@Model.ShowFlag';
        }]);
    </script>
</body>
</html>

另一种选择是创建一个返回JsonResult的MVC动作，然后编写一些JavaScript来进行Ajax调用并检索数据。

Answer 2

当仅发布表单时，输入和选择标记值将传递给服务器在你的情况下ShowFlag是一个范围，所以你需要把它作为输入：

<input type="checkbox" id="ShowFlag" name="ShowFlag" ng-bind="session.view.showFlag"/>

如果要使用ajax发布到服务器，请确保正确序列化模型：

例如，以下操作：

public ActionResult (FlagsConatiner container)
{
   //
} 

public class FlagsConatiner 
{
   public bool ShowFlag { get; set; }
}

序列化模型应如下所示：

{
   "ShowFlag":"true"
}

Answer 3

如上所述，您必须使用输入才能使绑定成功。我使用了以下工作：

<input type="hidden" id="ShowFlag" name="ShowFlag" ng-value="session.view.showFlag">

如何将MVC模型绑定与Angular ng-bind属性一起使用

3 个答案: