Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

I'm new to Angular and relatively new to ASP.NET MVC. I've successfully managed to pass my server model to my AngularJS controller. However, I want to be able to edit my model before passing it to the AngularJS controller.

How would I go about to achieve this? Any help is greatly appreciated!

My view:

...
            @if (Model != null)
            {
            <table class="table">
                @for (var index = 0; index < Model.Fields.Count; index++)
                {
                    <tr>
                        <td>@Html.DisplayTextFor(m => Model.Fields[index].Title)</td>
                        <td>@Html.EditorFor(m => Model.Fields[index].Value)</td>
                    </tr>
                }
            </table>
            } 
...
<form class="form-horizontal" role="form" ng-submit="posta(@System.Web.Helpers.Json.Encode(Model))">
    <div>
        <ul>
            <li ng-repeat="article in articles">
                {{ article.Article.itemNumber | uppercase }} - {{ article.Article.itemDescription | lowercase }}
            </li>
        </ul>
    </div>

    <div class="form-group">
        <div style="padding-left:110px">
            <input type="submit" value="OK" class="btn btn-primary" />
        </div>
    </div>
</form>

Controller:

var myApp = angular.module("ArticleApp", []);
myApp.controller("articleController", function ($scope) {
$scope.articles = [
  {
      Article: {
          itemNumber: '1234',
          itemDescription: 'Test'
      }
  },
    {
        Article: {
            itemNumber: '5678',
            itemDescription: 'Test2'
        }
    }
];

$scope.addRow = function () {
    $scope.articles.push({
        Article: {
            itemNumber: '2222',
            itemDescription: 'asdasd'
        }
    });

};

$scope.posta = function (model) { //Model does not contain changes :(

    var m = $scope.articles;

}
share|improve this question
1  
Razor (the language used by your view to inject C# into the view) creates static html that's sent to the client. From the looks of it your posta function will always get the Model that was sent to the client browser. If you want to get the updated Model you'll have to grab it using javascript I think. – WiteCastle Dec 4 '15 at 18:09
    
I agree with @WiteCastle setup a controller endpoint to return JSON data and call from angular with $http service – Lee.Winter Dec 4 '15 at 18:19
    
What is your expected behaviour ? Allowing user to edit all the articles ? – Shyju Dec 4 '15 at 18:37
    
Thanks guys. I want users to be able to fill in form data before I send it to my angular controller. I was afraid it wouldnt be possible through the EditorFor command. – Jocke Dec 5 '15 at 19:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.