Angularjs 如何将列表传递给角度数组

我是一个新来的。。。我有一个对象列表，我想传递给angular并使用ng repeat函数

使用从控制器传递的名称列表，我想显示一个id名称状态列表。之前，我做了以下几件事

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

在实现angulars功能后，我想设置列表，使其能够根据名称进行用户筛选

所以我的问题是，我如何传递NameList对象来填充angular，或者我可以填充该对象并以某种方式将列表绑定到angular

这就是我目前所拥有的

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

姓名：
@*我想将Model.NameList传递给客户*@



{{{cust.id+-+cust.name+-+cust.state}

在控制器中：

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

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

---

我认为您对AngularJS绑定的工作原理感到困惑，您应该阅读数据绑定指南：

同时，我认为有一个简单的JSFIDLE可以满足您的需求：

---

您还可以通过使用路线的解析功能设置

$scope.customers

。

我想出了一个可能有替代方案的解决方案

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

---

您是否试图调用服务器并将结果加载到

$scope.customers

？我不想调用服务器。名称列表对象来自初始加载。您需要展开您的问题。需要更多的细节。我们不知道什么是

Model.NameList

。好点子@Jesus。我希望编辑会让情况变得更糟一些clearer@MrM如果您想将数据从asp.net传递到angular，您可以在此处放置一个新的API控制器并从angular.demo请求数据：，但为什么问题被标记为C#&asp.net&.net？@dawuut，因为他想将信息从C#传递到angular。该列表不会硬编码给客户，就像@JesusRodriguez所说的，对象将来自C#@MrM，那么你不应该做这样的评论：“我不想给服务器打电话。”：-P.@Beterraba。。抱歉我应该注意，这里的服务调用只是为了演示您可能希望如何设置服务器调用，但是在服务中，您需要使用承诺，通过调用

$http

或使用

$resource

和

$q

生成，这样您的界面就不会等待服务器完成。虽然正如我之前所说，如果这都是在一个

ngRoute

中，那么您可能需要使用route的resolve函数。这实际上是有帮助的，因为它为我指明了正确的方向。谢谢@m.e.conroyGreat，很高兴我能帮助你。我应该指出，示例中的过滤器不仅会按对象的名称属性过滤，还会按对象的每个属性过滤，因此，如果你开始键入城市名称，它也会按该属性过滤。但是，您可以仅对特定属性进行筛选，您必须将您的ngModel从仅名称更改为类似

name.id

或

name.name

或

name.city

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

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

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