Question

我是角色的新手...我有一个对象列表，我想传递给角度并使用ng-repeat功能。

使用从我的控制器传递的NameList，我想显示一个id-names-states列表。以前，我做了以下......

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

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

3 个答案: