Pass value from angular to method

Question

I have this code that creates an todo-list in Angular.

<div class="row" ng-app="ToDo">
    <div ng-controller="todocontroller">
        <button ng-click="save()">Save</button>
        <br />
        <form name="frm" ng-submit="addTodo()">
            <input type="text" name="newTodo" ng-model="newTodo" required />
            <button ng-disabled="frm.$invalid">Go</button>
        </form>
        <button ng-click="clearCompleted()">ClearCompleted</button>
        <ul>
            <li id="test" ng-repeat="todo in todos">
                <input type="checkbox" ng-model="todo.done"/>
                <span ng-class="{'done':todo.done}">
                    {{todo.title}}
                </span>

            </li>
        </ul>
    </div>
</div>

The code works fine and creates a list of items as it should. I would now want to be able to pass the list to my method:

 public ActionResult SaveListFromAngular()
        {
            //Do stuff

            return View();
        }

I dont know how to do this in Angular. Should I maybe iterate through the list somehow? Im interested in learning the correct way to do this in Angular which is a new framwork for me.

$scope.save = function () {
            //Pass list to
            //Home/SaveListFromAngular
        }

Help appreciated! Thanks

EDIT: My complete scrip, suggestion added at the bottom:

angular.module('ToDo', []).
        controller('todocontroller', [
            '$scope', function($scope) {
                $scope.todos = [
                    { 'title': 'build todo app', 'done': false }
                ];



                $scope.addTodo = function() {
                    $scope.todos.push({ 'title': $scope.newTodo, 'done': false });
                    $scope.newTodo = "";
                }
                $scope.clearCompleted = function() {
                    $scope.todos = $scope.todos.filter(function(item) {
                        return !item.done;
                    });
                }
            }
        ]);

    function todocontroller($scope, $http) {
        $scope.save = function () {
            alert("fgfg");
            $http({
                method: 'POST',
                url: '/Home/SaveListFromAngular',
                headers: {
                    "Content-Type": "application/json"
                },
                data: { todos: $scope.todos }
            });
        }
    }

Please see this link: stackoverflow.com/questions/22390777/… — AD.Net
– AD.Net, Commented Aug 10, 2014 at 22:05

Darshan P · Accepted Answer · 2014-08-10 22:35:18Z

1

angular.module('ToDo', []).
    controller('todocontroller', [
        '$scope', "$http", function($scope, $http) {
            $scope.todos = [
                { 'title': 'build todo app', 'done': false }
            ];

            $scope.save = function (){
              $http({
                 method: 'POST', 
                 url: '/someUrl',
                 headers: {
                   "Content-Type": "application/json"
                 },
                 data: { todos: $scope.todos }
             });
           }


            $scope.addTodo = function() {
                $scope.todos.push({ 'title': $scope.newTodo, 'done': false });
                $scope.newTodo = "";
            }
            $scope.clearCompleted = function() {
                $scope.todos = $scope.todos.filter(function(item) {
                    return !item.done;
                });
            }
        }
    ]);

In your Action

 [HttpPost]
 public ActionResult SaveListFromAngular(List<Todo> todos)
 {
     return View();
 }

 public class Todo 
 {
    public string Title { get; set; }
    public bool Done { get; set; }
 }

edited Aug 10, 2014 at 22:35

answered Aug 10, 2014 at 22:09

Darshan P

2,24119 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2915962 Over a year ago

Thank you for answering, please have a look at my edit, for some reason, the alert() does not get hit? Can you tell if it looks right?

user2915962 Over a year ago

Thanks a lot. There is a problem with the $http, its saying use of an "implicitly declared global variable $http". Thanks a lot for your time.

Darshan P Over a year ago

Actually, i forgot to add $http dependency in controller. Check edit.

Dalorzo · Accepted Answer · 2014-08-10 22:10:39Z

1

My recommendation is that you setup WebApi and use Angular along with this REST Services layer.

With that being said all you need to do is to POST the fields like :

  $http.post('api/Todo',{ /*object or list*/}).success(function(response) {
           console.log("success");
          }).error(function(err){
             console.log("failure")
          });

answered Aug 10, 2014 at 22:10

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

1 Comment

user2915962 Over a year ago

Thank you, Im sure your recomedation about the webApi is a good one, im only just starting, trying to learn some basics. I´ll have a look at the WebApi when i feel more comfortable =)

Collectives™ on Stack Overflow

Pass value from angular to method

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related