使用AngularJS和Razor绑定值

Question

I'm new to angularjs. Trying to code the Edit functionality of a single person record.

<div ng-app="myapp">
        <div class="container">
            <div ng-controller="mycontroller">
                <div class="col-md-12 col-sm-12">

                    @Html.HiddenFor(o=>o.ID, new { @class = "form-control", ng_value="ID" })

                    <div class="form-group">
                        <label>Name</label>
                        @Html.TextBoxFor(o => o.Name, new { @class = "form-control", ng_value="Name" })
                    </div>
                    <div class="form-group">
                        <label>Name</label>
                        @Html.TextBoxFor(o => o.Address, new { @class = "form-control", ng_value="Address" })
                    </div>
                    <div class="form-group">
                        <label>Name</label>
                        @Html.TextBoxFor(o => o.Telephone, new { @class = "form-control", ng_value="Telephone" })
                    </div>

                    <div class="form-group">
                        <input type="button" value="Update" class="btn btn-primary" ng-click="updatedata()" />
                    </div>
                </div>
            </div>
        </div>
    </div> 

  <script>

        var app = angular.module("myapp", []);

        app.controller("mycontroller",function($scope,$http){

            $scope.updatedata = function () {
                alert($scope.Name);
                $http({ method: "post", url: "/Person/Edit", data: { id: $scope.ID, Name: $scope.Name, Address: $scope.Address, Telephone: $scope.Telephone } })
                .success(function () { alert("Success."); });

            }

        })

    </script>

When I click on the update button. $scope doesn't pass values to the server side Edit method. all the parameter values are null but actually, values do exist in Textboxes.

It looks like a conflict between AngularJS ng_value and the values loaded by Razor.

For Ex: $scope.Name is undifined.

Answer 1

Instead of having ng-value (one way binding) directive, place ng-model directive over your text-box to enable two way binding like ng_model="Name" . So any time changes occurs in text-box will reflect those changes in respective ng-model scope variable.

@Html.TextBoxFor(o => o.Telephone, 
   new { @class = "form-control", ng_value="Telephone", ng_model="Name" })

Answer 2

ng_value不会将您的文本框值与范围变量绑定，因为它是单向绑定而不是使用ng_model将模型数据绑定到angularjs控制器范围。