我在两个不同的网站上使用相同的代码但是在第二个网站上(它在后端系统上 - 查看不同的脚本)数据值{{}}未显示,如果有人有任何建议,为什么会发生这种情况我会非常感激。
工作:jiggs.alexgibsondesign.com
不工作:reflectresources.com
脚本:
angular.module('app', [
'ui.bootstrap',
'ngAnimate'
]).factory('sortable', [
'$filter',
'$rootScope',
function($filter, $rootScope) {
return function(scope, data, itemsPerPage, initSortingOrder) {
scope.sortingOrder = initSortingOrder;
scope.reverse = false;
scope.filteredItems = [];
scope.groupedItems = [];
scope.itemsPerPage = itemsPerPage;
scope.pagedItems = [];
scope.currentPage = 1;
scope.items = data;
scope.maxSize = 5;
var searchMatch = function(haystack, needle) {
if (!needle) {
return true;
}
return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
};
scope.search = function() {
scope.filteredItems = $filter('filter')(scope.items, $rootScope.query);
if (scope.sortingOrder !== '') {
scope.filteredItems = $filter('orderBy')(scope.filteredItems, scope.sortingOrder, scope.reverse);
}
scope.currentPage = 1;
scope.groupToPages();
scope.totalItems = scope.filteredItems.length;
};
scope.groupToPages = function() {
scope.pagedItems = [];
for (var i = 0; i < scope.filteredItems.length; i++) {
if (i % scope.itemsPerPage === 0) {
scope.pagedItems[Math.floor(i / scope.itemsPerPage)] = [scope.filteredItems[i]];
} else {
scope.pagedItems[Math.floor(i / scope.itemsPerPage)].push(scope.filteredItems[i]);
}
}
};
scope.range = function(start, end) {
var ret = [];
if (!end) {
end = start;
start = 0;
}
for (var i = start; i < end; i++) {
ret.push(i);
}
return ret;
};
scope.search();
scope.sort_by = function(newSortingOrder) {
if (scope.sortingOrder == newSortingOrder)
scope.reverse = !scope.reverse;
scope.sortingOrder = newSortingOrder;
scope.search();
};
scope.sort_by(initSortingOrder);
scope.totalItems = scope.filteredItems.length;
};
}
]).controller('main', [
'$scope',
'$rootScope',
'sortable',
function($scope, $rootScope, sortable) {
$rootScope.query = '';
$scope.gridToggle = true;
$scope.onQueryChange = function(val) {
$rootScope.query = val;
$scope.search();
};
var items = [{
'icon': 'm-photo',
'name': 'Office Name',
'date': '123 awesome lane wonderfulville',
'user': {
'name': '1-877-1234',
'color': '#b3cc55'
}
}, {
'icon': 'm-photo',
'name': 'Office Name',
'date': '123 awesome lane wonderfulville',
'user': {
'name': '1-877-1234',
'color': '#b3cc55'
}
}, {
'icon': 'm-photo',
'name': 'Office Name',
'date': '123 awesome lane wonderfulville',
'user': {
'name': '1-877-1234',
'color': '#b3cc55'
}
}, {
'icon': 'm-photo',
'name': 'Office Name',
'date': '123 awesome lane wonderfulville',
'user': {
'name': '1-877-1234',
'color': '#b3cc55'
}
}, {
'icon': 'm-photo',
'name': 'Office Name',
'date': '123 awesome lane wonderfulville',
'user': {
'name': '1-877-1234',
'color': '#b3cc55'
}
}, {
'icon': 'm-photo',
'name': 'Office Name',
'date': '123 awesome lane wonderfulville',
'user': {
'name': '1-877-1234',
'color': '#b3cc55'
}
}, {
'icon': 'm-photo',
'name': 'Office Name',
'date': '123 awesome lane wonderfulville',
'user': {
'name': '1-877-1234',
'color': '#b3cc55'
}
}, {
'icon': 'm-photo',
'name': 'Office Name',
'date': '123 awesome lane wonderfulville',
'user': {
'name': '1-877-1234',
'color': '#b3cc55'
}
}];
sortable($scope, items, 6, 'updated_at');
}
]);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700);
.no-select,
.grid-toggle,
ul.grid.grid-list .grid-head ul li {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
::-webkit-input-placeholder {
color: #5d7592;
}
:-moz-placeholder {
color: #5d7592;
}
::-moz-placeholder {
color: #5d7592;
}
:-ms-input-placeholder {
color: #5d7592;
}
.m {
font-size: 28px;
}
.ctrls {
margin-bottom: 1em;
max-width: 960px;
margin: 0 auto;
}
.ctrls:after {
content: '';
clear: both;
display: block;
}
.filter {
float: left;
width: 75%;
padding-left: 2.5em;
}
.filter .m {
color: #5d7592;
position: absolute;
margin-left: -1.25em;
}
.filter input {
width: 100%;
vertical-align: top;
height: 2em;
border: none;
background: #f9fcfe;
font-size: 16px;
font-weight: 300;
color: #5d7592;
outline: none;
padding: 0 0.5em;
}
.grid-toggle {
cursor: pointer;
float: right;
}
.grid-toggle a span {
color: #5d7592;
}
.grid-toggle a span:first-child {
color: #38405e;
margin-right: 12px;
}
.grid-toggle a.active span:first-child {
color: #5d7592;
}
.grid-toggle a.active span:last-child {
color: #38405e;
}
.btn {
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
color: #5d7592;
}
ul.grid .grid-body ul li span {
display: inline-block;
vertical-align: middle;
}
ul.grid .grid-body ul li span.grid-icon {
color: #476283;
}
ul.grid .grid-body ul li span.grid-title a {
font-size: 16px;
font-weight: 500;
color: #38405e;
text-decoration: none;
}
ul.grid .grid-body ul li span.grid-title a:hover {
text-decoration: underline;
}
ul.grid .grid-body ul li span.grid-usericon {
margin-right: 12px;
font-size: 0;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
background: #b3cc55;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
ul.grid .grid-body ul li span.grid-usericon:first-letter {
color: white;
font-size: 16px;
}
ul.grid .grid-body ul li span.grid-date,
ul.grid .grid-body ul li span.grid-user {
color: #5d7592;
font-size: 14px;
}
ul.grid .grid-body ul li span a .m {
color: #5d7592;
}
ul.grid.grid-thumb:after {
content: '';
display: block;
clear: both;
}
ul.grid.grid-thumb .grid-head {
display: none;
}
ul.grid.grid-thumb .grid-body {
width: 50%;
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 2em;
}
ul.grid.grid-thumb .grid-body:nth-child(even) {
padding-right: 1em;
}
ul.grid.grid-thumb .grid-body:nth-child(odd) {
padding-left: 1em;
}
ul.grid.grid-thumb .grid-body ul {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #f9fcfe;
border: 1px solid #dde8f0;
padding: 1em 1.5em .75em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
float: left;
width: 100%;
list-style: none;
}
ul.grid.grid-thumb .grid-body ul:after {
content: '';
display: block;
clear: both;
}
ul.grid.grid-thumb .grid-body ul li {
position: relative;
}
ul.grid.grid-thumb .grid-body ul li span.grid-icon {
display: block;
font-size: 56px;
margin: 0 0 12px;
}
ul.grid.grid-thumb .grid-body ul li span.grid-title {
display: block;
margin-bottom: 1em;
}
ul.grid.grid-thumb .grid-body ul li span.grid-user {
margin-bottom: 2px;
}
ul.grid.grid-thumb .grid-body ul li span.grid-user .grid-usericon {
position: absolute;
left: 0;
bottom: -37px;
}
ul.grid.grid-thumb .grid-body ul li span.grid-date {
display: block;
}
ul.grid.grid-thumb .grid-body ul li span.grid-options {
float: right;
}
ul.grid.grid-list {
background: #f9fcfe;
border: 1px solid #dde8f0;
padding: 0 2em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
list-style: none;
}
ul.grid.grid-list li.grid-body {
border-bottom: 1px solid #dde8f0;
}
ul.grid.grid-list li.grid-body:last-child,
ul.grid.grid-list li.grid-body.last {
border-bottom: none;
}
ul.grid.grid-list .grid-head ul:after {
content: '';
display: block;
clear: both;
}
ul.grid.grid-list .grid-head ul li {
font-size: 16px;
border: none;
text-align: left;
padding: 2em 0 1em;
float: left;
}
ul.grid.grid-list .grid-head ul li a {
cursor: pointer;
color: #b3cc55;
font-weight: 600;
}
ul.grid.grid-list .grid-head ul li a:hover {
text-decoration: underline;
}
ul.grid.grid-list .grid-body ul:after {
content: '';
display: block;
clear: both;
}
ul.grid.grid-list .grid-body ul li {
border: none;
text-align: left;
height: 5em;
line-height: 5em;
padding: 0;
float: left;
}
ul.grid.grid-list .grid-body ul li:first-child {
text-align: left;
width: 40%;
}
ul.grid.grid-list .grid-body ul li:nth-child(2) {
width: 30%;
}
ul.grid.grid-list .grid-body ul li:nth-child(3) {
width: 15%;
}
ul.grid.grid-list .grid-body ul li:last-child {
text-align: right;
width: 15%;
}
ul.grid.grid-list .grid-body ul li span.grid-icon {
margin-right: 0.5em;
}
ul.grid.grid-list .grid-body ul li span.grid-username {
width: 100px;
}
li.clear-fix {
display: block;
clear: both;
}
li.pagination {
padding: 1em 0 2em;
}
li.pagination p {
font-size: 14px;
}
li.pagination ul.pager {
margin: 2em 0;
}
li.pagination ul.pager li {
display: inline;
}
li.pagination ul.pager li:first-child {
margin-right: 1em;
}
li.pagination ul.pager li a {
color: #b3cc55;
text-decoration: none;
padding: 0.5em 1.5em;
border: 1px solid #b3cc55;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.animate-repeat {
list-style: none;
box-sizing: border-box;
overflow: hidden;
}
.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
-webkit-transition: all ease-in-out 0.4s;
transition: all ease-in-out 0.4s;
}
.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
opacity: 0;
}
.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
opacity: 1;
}
.grid-thumb .animate-repeat.ng-move,
.grid-thumb .animate-repeat.ng-enter,
.grid-thumb .animate-repeat.ng-leave {
-webkit-transition: none;
transition: none;
}
.grid-list .animate-repeat {
line-height: 5em;
}
.grid-list .animate-repeat.ng-leave.ng-leave-active,
.grid-list .animate-repeat.ng-move,
.grid-list .animate-repeat.ng-enter {
height: 0;
}
.grid-list .animate-repeat.ng-leave,
.grid-list .animate-repeat.ng-move.ng-move-active,
.grid-list .animate-repeat.ng-enter.ng-enter-active {
height: 5em;
}
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
list-style: none !important;
}
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Reklino/munkey-icons/master/munkey.css" />
<div ng-app="app" ng-controller="main">
<main>
<div class="ctrls">
<div class="filter">
<span class="m m-search"></span>
<input type="text" ng-model="searchies" ng-change="onQueryChange(searchies)" class="form-control" placeholder="Filter" />
<br />
<br />
</div>
<div class="grid-toggle">
<a ng-click="gridToggle = !gridToggle" ng-class="{ 'active' : gridToggle }">
<span class="m m-squares"></span>
<span class="m m-form"></span>
</a>
</div>
</div>
<div class="container">
<ul class="grid" ng-class="{ 'grid-list' : gridToggle, 'grid-thumb' : !gridToggle }" style="list-style: none;">
<li class="grid-head">
<ul>
<li style="width: 40%;"><a ng-click="sort_by('name')">Office</a>
</li>
<li style="width: 30%;"><a ng-click="sort_by('user.name')">Contact</a>
</li>
<li style="width: 15%;"><a ng-click="sort_by('date')">Location</a>
</li>
<li style="width: 15%;"></li>
</ul>
</li>
<li class="grid-body animate-repeat" ng-repeat="item in pagedItems[currentPage - 1] | orderBy:sortingOrder:reverse" ng-class="{'last':$last}">
<ul>
<li>
<span class="grid-icon m" ng-class="item.icon"></span>
<span class="grid-title"><a href="#">{{ item.name }}</a></span>
</li>
<li>
<span class="grid-user">
<span class="grid-username">{{ item.user.name }}</span>
</span>
</li>
<li>
<span class="grid-date">{{ item.date }}</span>
</li>
<li>
<span class="grid-options"><a href="#"><span class="m m-ellipsis"></span>
</a>
</span>
</li>
</ul>
</li>
<li class="clear-fix"></li>
<li class="pagination">
<pager total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" max-size="maxSize" ng-change="pageChanged()"></pager>
<p ng-if="itemsPerPage * currentPage < totalItems">
Showing {{ itemsPerPage * currentPage - itemsPerPage + 1 }} - {{ itemsPerPage * currentPage }} of {{ totalItems }} total items
</p>
<p ng-if="itemsPerPage * currentPage >= totalItems">
Showing {{ itemsPerPage * currentPage - itemsPerPage + 1 }} - {{ totalItems }} of {{ totalItems }} total items
</p>
</li>
</ul>
</div>
</main>
</div>
<script src='http://listingsimages.fnistools.com/Uploads/RECos/1298/ContentFiles/angular.js'></script>
<script src='http://listingsimages.fnistools.com/Uploads/RECos/1298/ContentFiles/ui-bootstrap-tpls.min.js'></script>
<script src='http://listingsimages.fnistools.com/Uploads/RECos/1298/ContentFiles/angular-animate.js'></script>