angularjs数据值不显示

时间:2015-03-07 23:51:12

标签: javascript html angularjs

我在两个不同的网站上使用相同的代码但是在第二个网站上(它在后端系统上 - 查看不同的脚本)数据值{{}}未显示,如果有人有任何建议,为什么会发生这种情况我会非常感激。

工作: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 &lt; totalItems">
            Showing {{ itemsPerPage * currentPage - itemsPerPage + 1 }} - {{ itemsPerPage * currentPage }} of {{ totalItems }} total items
          </p>
          <p ng-if="itemsPerPage * currentPage &gt;= 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>

0 个答案:

没有答案