Angularjs Table Route [closed]

StackOverflow https://stackoverflow.com/questions/20895514

문제 

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
    <script data-require="ng-table-export@0.1.0" data-semver="0.1.0" src="http://bazalt-cms.com/assets/ng-table-export/0.1.0/ng-table-export.js"></script>
    <link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-app="main" ng-controller="DemoCtrl">
    <table ng-table="tableParams" class="table">
      <tr ng-repeat="user in $data">
        <td data-title="'Name'">
          <span ng-if="!user.$edit">{{user.name}}</span>
          <div ng-if="user.$edit"><input class="form-control" type="text" ng-model="user.name" /></div>
        </td>
        <td data-title="'Age'" width="200">
          <span ng-if="!user.$edit">{{user.age}}</span>
          <div ng-if="user.$edit"><input class="form-control" type="number" ng-model="user.age" /></div>
        </td>
        <td data-title="'Actions'" width="200">
          <a ng-if="!user.$edit" href="" class="btn btn-default btn-xs" ng-click="user.$edit = true">Edit</a>
          <a ng-if="user.$edit" href="" class="btn btn-primary btn-xs" ng-click="user.$edit = false">Save</a>
        </td>
      </tr>
    </table>
  </body>
</html>

I have this simple example..it works. but when I wanted to do any like this

var App = angular.module('App', ['ngRoute']).controller('tableController', function ($scope, ngTableParams, $sce) {
    $scope.data = [{ name: "Moroni", age: 50 },
        { name: "Tiancum", age: 43 },
        { name: "Jacob", age: 27 },
        { name: "Nephi", age: 29 },
        { name: "Enos", age: 34 },
        { name: "Tiancum", age: 43 },
        { name: "Jacob", age: 27 },
        { name: "Nephi", age: 29 },
        { name: "Enos", age: 34 },
        { name: "Tiancum", age: 43 },
        { name: "Jacob", age: 27 },
        { name: "Nephi", age: 29 },
        { name: "Enos", age: 34 },
        { name: "Tiancum", age: 43 },
        { name: "Jacob", age: 27 },
        { name: "Nephi", age: 29 },
        { name: "Enos", age: 34 }];
    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10           // count per page
    }, {
            total: $scope.data.length, // length of data
            getData: function ($defer, params) {
                $defer.resolve($scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        });
    App.config(function ($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider
            .when('/', {
                templateUrl: 'home.html',
                controller: function ($scope) {
                }
            })
            .when('/about', {
                templateUrl: 'about.html',
                controller: 'tableController'
            });
    });
});
<html ng-app="App">
<head>
   <!-- SCROLLS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
    <!-- SPELLS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
    <script data-require="ng-table-export@0.1.0" data-semver="0.1.0" src="http://bazalt-cms.com/assets/ng-table-export/0.1.0/ng-table-export.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular-route.min.js"></script>.
    <link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link href="style.css" rel="stylesheet" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <nav class="navbar navbar-default navbar-static-top">
        <ul class="nav navbar-nav">
            <li><a href="/"> home</a></li>
            <li><a href="/about"> about</a></li>
        </ul>
    </nav>
    <div ng-view></div>
</body>
</html>

something go wrong.

도움이 되었습니까?

해결책

you aren't loading ngRoute, and you have syntax errors in your javascript.

As well, you've got your ng table scripts loading BEFORE your angular scripts.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top