Databind a list with angular, using a mvc controller method

Question

I am new with angular, so i hope this question is not to stupid.
as the title says, i wish to populate a list using angular and a method from a mvc controller. But i cannot figure out how to call the method? i have tried making a http request but i cannot get i to work.
Am i totally lost or is it somthing like this below?
Here are the list.

<div ng-app="cardList" ng-controller="CardController"></div>
<p><input type="text" ng-model="test" /></p>

<ul>
    <li ng-repeat="x in names | filter:test">
        {{x}}
    </li>
</ul>

and here is the script.

<script>
var list = $http({ url: "Controllers/CardController/AllCardsList", method: "GET" });

angular.module('cardList', []).controller('CardController', function ($scope) {
    $scope.names = [list];
});

one thing i see, is that the first div should surround the other html elements. The <p> and <ul> tags are not running within angular, because the ng-app attribute is outside these tags — fikkatra
– fikkatra, Commented Apr 7, 2016 at 12:31

Pankaj Parkar · Accepted Answer · 2016-04-07 12:39:08Z

3

Try this:

<div ng-app="cardList" ng-controller="CardController">
  <p>
    <input type="text" ng-model="test" />
  </p>

  <ul>
    <li ng-repeat="x in names | filter:test">
      {{x}}
    </li>
  </ul>
</div>

and:

angular.module('cardList', []).controller('CardController', function($scope, $http) {
  $http.get("Controllers/CardController/AllCardsList").then(function(response){ 
    $scope.names = response.data;
  });
});

edited Apr 7, 2016 at 12:39

Pankaj Parkar

136k23 gold badges241 silver badges306 bronze badges

answered Apr 7, 2016 at 12:34

fikkatra

5,9024 gold badges45 silver badges74 bronze badges

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

8 Comments

Code_Viking Over a year ago

i have just tried this, but when i look in the console it gets a 404 error do you know why that could be?

fikkatra Over a year ago

Probably your url is not correct, and MVC cannot find it. You are mapping to a folder structure, rather than using MVC routing. Try "Card/AllCardsList" (assuming your controller is called "CardController" and your action is called "AllCardsList")

Code_Viking Over a year ago

you are right the routing is wrong that is why. Hmm it looks like it is calling the model layer and then the controller for some reason

fikkatra Over a year ago

try testing your MVC backend using Postman or even your browser, before testing the angular app. This way you know where the problem is.

Code_Viking Over a year ago

i have corrected the routing so that it should work. But i am still getting the 404 not found.

|

Collectives™ on Stack Overflow

Databind a list with angular, using a mvc controller method

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related