0

私はAngularの初心者です...Angularに渡し、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'

angulars機能を実現した後、名前に基づいてユーザーフィルターを設定できるリストを設定したいと思います

だから私の質問は、どのように 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>
4

3 に答える 3

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 に答える