0

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

3 回答 3

1

我认为您对 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使用路线的解析功能进行设置。

于 2013-11-13T19:41:32.233 回答
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' }
];
于 2013-11-13T17:12:58.080 回答
0

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

<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);
}
}
于 2013-11-14T13:10:34.617 回答