Как передать список угловому массиву

Question

Я новый для углового ... У меня есть список объектов, который я хотел бы передать угловому и использовать функцию ng-repeat.

Используя NameList, который был передан с моего контроллера, я хотел бы отобразить список состояний имен идентификаторов. Перед тем, я сделал следующее ...

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

список будет что-то вроде ...

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' 

После реализации возможностей я углам главного хотел бы создать список, с возможностью иметь пользовательский фильтр, основанный на именах

Итак, мой вопрос: как передать объект NameList для заполнения с помощью углового, или я могу просто заполнить объект и как-то связать список с угловым?

Это то, что я до сих пор

<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> 

Answer 1

В контроллере:

$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' } 
]; 

Answer 2

Я думаю, что вы смущены о том, как AngularJS переплетные работы, вы должны прочитать руководство по связыванию данных: http://docs.angularjs.org/guide/databinding

В то же время вот простой JSFiddle Я думаю, что делает то, что вы ищете: 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> 

И контроллер:

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; 
      } 
     }; 
    }); 

Вы можете также установить $scope.customers с помощью функции решимости маршрута.

Answer 3

Я придумал решение, которое может иметь возможную альтернативу ...

<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 файл

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); 
} 
}