我很难（很多天搜索和阅读）为来自rails Json文件的数据设置初始值。
我的应用程序是关于事故故障单，当我将所有数据库条目转换为数据-ng-repeat时，我无法设置默认视图，例如首次加载页面时，首先只显示未解决的票证。我还希望在调用ng-click和各种条件时可以过滤整组数据。
ticket_controllers.rb
var ticketControllers = angular.module('ticketControllers', []);
ticketControllers
.controller('ticketListController', ['$scope', 'Ticket',
function ($scope, Ticket) {
$scope.tickets_all = Ticket.query();
$scope.orderProp = 'opened_date';
$scope.getAllTickets = function (ticket) {
return $scope.tickets_all;
};
$scope.getClosedTickets = function (ticket) {
if (ticket.status === 'CL') {
return true;
}
return false;
};
$scope.getUnsolvedTickets = function (ticket) {
if (ticket.status === 'IP' || ticket.status === 'WF') {
return true;
}
return false;
};
$scope.getAbortedTickets = function (ticket) {
// console.log("Just called" + self.ticket);
if (ticket.status === 'AB') {
return true;
}
return false;
};
$scope.styleTicketStatus = function (status) {
switch (status){
case ("IP") : return "ui small circular teal label"; break;
case ("WF") : return "ui small circular purple label"; break;
case ("CL") : return "ui small circular black label"; break;
case ("AB") : return "ui small circular black label"; break;
default: break;
}
};
}]);
模板
<table class="ui table raised segment">
<thead>
<tr>
<th></th>
<th class="text-center six column wide">Issue</th>
<th class="text-center">Category</th>
<th class="text-center">Requester</th>
<th class="text-center">Pending for</th>
<th class="text-center">Owner</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="ticket in getAllTickets() | filter : search | filter : statusOrder ">
<td class="text-center">
<div>
<span class="{{styleTicketStatus(ticket.status)}}">
{{ticket.status}}
</span>
</div>
</td>
<td>
<a href="/tickets/{{ticket.id}}" class="ticket_link">{{ticket.issue}} </a>
<br /><small>{{ticket.explanation}}</small>
</td>
<td class="text-center">{{ticket.ticket_category.category}}</td>
<td>{{ticket.user.lastname}}, {{ticket.user.firstname}}</td>
<td class="text-center">{{ticket.date_opened| date:'MM/dd h:mm'}}</td>
<td>{{ticket.owner.lastname}}, {{ticket.owner.firstname}}</td>
</tr>
</tbody>
</table>
侧边栏（过滤器..）
<div class="ui ">
<div class="ui input small fluid">
<input type="text" placeholder="Search in tickets..." class="" ng-model="search.issue" >
</div>
</div>
<div class="ui vertical fluid small menu ticket-sidebar">
<a class="active teal item" ng-click="statusOrder = getUnsolvedTickets">
My unsolved tickets
<div class="ui teal label">{{ (tickets_all | filter:getUnsolvedTickets ).length }}</div>
</a>
<a class="item" ng-click="statusOrder = getUnsolvedTickets">
All unsolved tickets
<div class="ui label">{{ (tickets_all | filter:getUnsolvedTickets ).length }}</div>
</a>
<a class="item" ng-click="statusOrder = getAbortedTickets">
Aborted tickets
<div class="ui label">{{ (tickets_all | filter:getAbortedTickets ).length }}</div>
</a>
<a class="item" ng-click="statusOrder = getClosedTickets">
Closed tickets
<div class="ui label">{{ (tickets_all | filter:getClosedTickets ).length }}</div>
</a>
<a class="item" ng-click="statusOrder = getAllTickets">
All tickets
<div class="ui label">{{tickets_all.length}}</div>
</a>
</div>
有人可以在我的路上轻松一点吗？
答案 0 :(得分：1)
更好的方法是处理控制器内部的过滤，并允许列表根据过滤后的列表自然更改。
您可以通过$filter服务以编程方式访问任何过滤器，如下所示：
//Get a reference to the 'filter' Filter
var filterFilter = $filter('filter');
//Execute the filter against a list
var filteredList = filterFilter(list, 'substring');
使用此方法可让您在控制器中获得更大的灵活性。您可以根据用户输入/操作设置一些选项，然后立即执行所有过滤器，这比在绑定中使用它们更高效。
您可以在下面看到以下内容：
(function() {
function ticketCtrl($filter) {
var $this = this;
//Get a reference to the 'filter' Filter
var filter = $filter('filter');
//Set the initial filter to status === 'Unresolved'
changeStatusFilter('Unresolved');
//Changes the status filter and filters the list
// based on user input
function changeStatusFilter(status) {
//Set the new status filter for use in the UI
$this.statusFilter = status;
//If we are viewing all statuses, just copy the
// original list to the one being bound in the UI
if (status === 'All') {
$this.filteredTickets = angular.copy(allTickets);
return;
}
//Set the list being bound in the UI by running
// it through the 'filter' Filter using a custom
// predicate that matches on status exactly
$this.filteredTickets = filter(allTickets, function(ticket) {
return ticket.status === $this.statusFilter;
});
};
//Create a function that can be used from the UI
// to determine if a given status matches the
// currently selected filter
function isCurrentFilter(status) {
return $this.statusFilter === status;
};
//Because we are using the "Controller as" syntax
// the entire controller will be bound to the scope.
// Anything we want to be available to the UI needs
// to be exposed on the controller. We can do this
// by adding properties and methods to 'this' which
// is aliased here using the '$this' variable
$this.isCurrentFilter = isCurrentFilter;
$this.changeStatusFilter = changeStatusFilter;
}
//Set up our dependencies using the '$inject'
// notation.
ticketCtrl.$inject = ['$filter'];
angular.module('ticket-app', [])
.controller('ticketCtrl', ticketCtrl);
//Just some static data for demo purposes
var allTickets = [{
number: '1234',
name: 'Answer Question',
status: 'Resolved'
}, {
number: '3982',
name: 'Include Snippet',
status: 'Resolved'
}, {
number: '0283',
name: 'Get Upvotes',
status: 'Unresolved'
}, {
number: '0273',
name: 'Make Pretty',
status: 'Resolved'
}, {
number: '8902',
name: 'Mark Accepted',
status: 'Unresolved'
}, {
number: '1908',
name: 'Solve World Hunger',
status: 'Unresolved'
}, {
number: '7923',
name: 'Pick up dry cleaning',
status: 'Unresolved'
}];
}());<script src="http://code.angularjs.org/1.3.0/angular.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- -->
<div class="container" ng-app="ticket-app" ng-controller="ticketCtrl as ctrl">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-tabs" role="tablist">
<li ng-class="{active:ctrl.isCurrentFilter('Unresolved')}">
<a ng-click="ctrl.changeStatusFilter('Unresolved')" href="">Unresolved</a>
</li>
<li ng-class="{active:ctrl.isCurrentFilter('Resolved')}">
<a ng-click="ctrl.changeStatusFilter('Resolved')" href="">Resolved</a>
</li>
<li ng-class="{active:ctrl.isCurrentFilter('All')}">
<a ng-click="ctrl.changeStatusFilter('All')" href="">All</a>
</li>
</ul>
<table class="table">
<thead>
<tr>
<th>Ticket #</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ticket in ctrl.filteredTickets">
<td>{{ticket.number}}</td>
<td>{{ticket.name}}</td>
<td>
<span class="label" ng-class="{'label-success':ticket.status==='Resolved','label-danger':ticket.status==='Unresolved'}">{{ticket.status}}</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
答案 1 :(得分：0)
它（一如既往）比我想象的更容易：
我刚在“}”标签前输入一行：
$scope.statusOrder = $scope.getUnsolvedTickets;
所以它在第一次调用函数后会带来未解决的。