How to pass list to angular array

Question

I am a new to angular... I have an object list that I would like to pass to angular and use the ng-repeat function.

Using NameList that was passed from my controller, I would like to display a list of id-names-states. Before, I did the following...

<ul>
@foreach (var item in Model.NameList) {
    <li>item.id - item.names - item.states</li> }
</ul>

the list would be something like...

 id: '1', name: 'John Doe', city: 'Phoenix' 
 id: '2', name: 'Tony Hope', city: 'Queens' 
 id: '3', name: 'Jane Doe', city: 'Frederick' 
 id: '4', name: 'John Smith', city: 'Miami' 
 id: '5', name: 'Tom Ford', city: 'Atlanta'

After realizing angulars capabilities I would like to set up the list, with the ability to have the user filter based on names

So my question is, How do I pass the NameList object to get populated with angular, or can I just populate the object and tie the list to angular somehow?

This is what I have so far

<div id="angularWrapper" data-ng-app="" data-ng-controller ="SimpleController">
    <div>Name:
        <input type="text" data-ng-model="name" />
    </div>
    @*I would like to pass Model.NameList to customers*@
    <div data-ng-model="@Model.NameList"></div>        
    <br />
    <ul>
        <li data-ng-repeat="cust in customers | filter:name">{{cust.id + - + cust.name + - + cust.state}}</li>
    </ul>
</div>

Are you trying to call the server and load the results into the $scope.customers? — Karl Anderson
– Karl Anderson, Commented Nov 13, 2013 at 16:50
I don't want to call the server. The NameList object comes from initial load. — MrM
– MrM, Commented Nov 13, 2013 at 16:57
You are going to need to expand your question. Needs more details. We don't know what Model.NameList is. — Jesus Rodriguez
– Jesus Rodriguez, Commented Nov 13, 2013 at 17:07
Good point @Jesus. I hope the edits makes the situation a bit clearer — MrM
– MrM, Commented Nov 13, 2013 at 17:22
@MrM If you want to pass data from asp.net to angular, you can put a new API controller and request the data from angular. — Jesus Rodriguez
– Jesus Rodriguez, Commented Nov 13, 2013 at 17:25

D.Evangelista · Accepted Answer · 2013-11-13 17:12:58Z

1

In your controller:

$scope.customers = [
  { id: '1', name: 'John Doe', city: 'Phoenix' },
  { id: '2', name: 'Tony Hope', city: 'Queens' },
  { id: '3', name: 'Jane Doe', city: 'Frederick' },
  { id: '4', name: 'John Smith', city: 'Miami' },
  { id: '5', name: 'Tom Ford', city: 'Atlanta' }
];

answered Nov 13, 2013 at 17:12

D.Evangelista

6,5511 gold badge28 silver badges33 bronze badges

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

5 Comments

meriadec Over a year ago

demo here : Plunker, but why question is tagged C# & asp.net & .net ?

Jesus Rodriguez Over a year ago

@dawuut because he wants to pass info from C# to angular.

MrM Over a year ago

The list will not be hard coded to customers, like @JesusRodriguez said, the object will be coming from C#

D.Evangelista Over a year ago

@MrM Then you shouldnt do comments like: "I don't want to call the server." :-P.

MrM Over a year ago

@Beterraba.. apologies

m.e.conroy · Accepted Answer · 2013-11-13 19:41:32Z

1

I think you're confused about how AngularJS binding works, you should read the guide on Data Binding: http://docs.angularjs.org/guide/databinding

In the meantime here's a simple JSFiddle I think does what you're looking for: http://jsfiddle.net/mikeeconroy/75WPW/1/

<div ng-controller="myCtrl">
    Name: <input type="text" ng-model="name" />
    <ul>
        <li ng-repeat="cust in customers | filter:name">{{cust.id}} - {{cust.name}} - {{cust.city}}</li>
    </ul>
</div>

And the controller:

 angular.module('myApp',[])
    .controller('myCtrl', ['$scope','mySrv',function ($scope,mySrv) {
        $scope.name = '';
        $scope.customers = [];

        $scope.customers = mySrv.getCustomers();
    }])
    // fake service, substitute with your server call ($http)
    .factory('mySrv',function(){
        var customers = [
            {id: '1', name: 'John Doe', city: 'Phoenix'},
            {id: '2', name: 'Tony Hope', city: 'Queens'},
            {id: '3', name: 'Jane Doe', city: 'Frederick'},
            {id: '4', name: 'John Smith', city: 'Miami'},
            {id: '5', name: 'Tom Ford', city: 'Atlanta'}
        ];
        return {
            getCustomers : function(){
                return customers;
            }
        };
    });

You could also set $scope.customers by using the resolve function of your route.

answered Nov 13, 2013 at 19:41

m.e.conroy

3,53828 silver badges28 bronze badges

4 Comments

m.e.conroy Over a year ago

I should note that the service call here is just to demonstrate how you may want to set up a server call, but in the service you're going to want to use promises, generated by calling $http or by using $resource and $q this way your interface isn't waiting on the server to finish. Although as I said before if this is all in a ngRoute then you may want to use the route's resolve function.

MrM Over a year ago

This was actually helpful by pointing me in right direction. Thanks @m.e.conroy

m.e.conroy Over a year ago

Great, glad I could help you out

m.e.conroy Over a year ago

I should point out that the filter in the example will not only filter by name property of an object but by every property of the object so if you start typing the name of a city it will also filter on that. You can however filter on just a specific property, you'd have to change your ngModel from just name to something like name.id or name.name or name.city

MrM · Accepted Answer · 2013-11-14 13:10:34Z

I came up with a solution that may have a possible alternative...

<div id="angularWrapper" data-ng-app="demoApp" data-ng-controller="SimpleController">
    <div>
        Name:
        <input type="text" data-ng-model="name" />
    </div>
    <div>
        <ul>
            <li data-ng-repeat="eg in List | filter: name">{{ eg.Name }}</li>
        </ul>
    </div>
    <br />
    <script>
        $(function () {
            var scope = angular.element('#angularWrapper').scope();
            @foreach (var npo in Model.NameList)
            { 
                @: scope.AddList({ Name: '@eg.Name' });
            }
            scope.$apply();
        });
    </script>
</div>

.js file

function getList() {
var self = this;
self.Name = "";
}

var demoApp = angular.module('demoApp', []);
demoApp.controller('SimpleController', SimpleController); //could just load the function($scope) from simplecontroller..

function SimpleController($scope) {
$scope.List = [];
$scope.AddList = function (data) {
    var eg = new getList();
    eg.Name = data.Name;
    $scope.List.push(eg);
}
}

Collectives™ on Stack Overflow

How to pass list to angular array

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related