Question

<!DOCTYPE html>
<html>
 <head>
 <title>Table</title>
</head>
<body ng-app>
<div ng-controller="rowCollection as row">
</div>
<form>
<label for="predicate">selected predicate:</label>
<select class="form-control" id="predicate" ng-model="selectedPredicate" ng-options="predicate for predicate in predicates"></select>
</form>
<table st-table="rowCollection" class="table table-striped">
   <thead>
<tr>
    <th st-sort="firstName">first name</th>
    <th st-sort="lastName">last name</th>
    <th st-sort="birthDate">birth date</th>
    <th st-sort="balance">balance</th>
    <th>email</th>
</tr>
<tr>
    <th>
        <input st-search="firstName" placeholder="search for firstname" class="input-sm form-control" type="search"/>
    </th>
    <th colspan="3">
        <input st-search placeholder="global search" class="input-sm form-control" type="search"/>
    </th>
    <th>
        <input st-search="{{selectedPredicate}}" placeholder="bound predicate" class="input-sm form-control" type="search"/>
    </th>
</tr>
</thead>
<tbody>
  <tr ng-repeat="row in rowCollection">
    <td>{{row.firstName | uppercase}}</td>
    <td>{{row.lastName}}</td>
    <td>{{row.birthDate | date}}</td>
    <td>{{row.balance | currency}}</td>
    <td><a ng-href="mailto:{{row.email}}">email</a></td>
</tr>
</tbody>

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js">     </script>
<script type="text/javascript" src="table.js"></script>
</body>
</html>
app.controller('filterCtrl', ['$scope', '$filter', function (scope, filter) {
scope.rowCollection = [
    {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
    {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
    {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
];

scope.predicates = ['firstName', 'lastName', 'birthDate', 'balance', 'email'];
scope.selectedPredicate = scope.predicates[0];
}]);

我正在尝试使用控制器创建角度表，但我不确定ng-controller的语法。任何人都可以帮助语法吗？我只是一个初学者，所以我对所有确切的语法都不太熟悉。

Answer 1

以下是您的代码的工作内容：http://plnkr.co/edit/7IQvbFQQTMJjHVlNBcr8?p=preview

您在控制器中使用了controllerAs语法和$ scope。我已将其更新为一致。您还在div中定义了ng-controller，它没有包装任何代码。这也已更新。

更新后的HTML：

<!DOCTYPE html>
<html ng-app="plunker">
 <head>

 <title>Table</title>
 <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-require="angular.js@1.4.x"></script>
    <script data-require="angular.js@1.4.x" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"></script>
    <script src="app.js"></script>
</head>
<body>
<div ng-controller="testingCtrl">
<form>
<label for="predicate">selected predicate:</label>
<select class="form-control" id="predicate" ng-model="selectedPredicate" ng-options="predicate for predicate in predicates"></select>
</form>
<table st-table="rowCollection" class="table table-striped">
   <thead>
<tr>
    <th st-sort="firstName">first name</th>
    <th st-sort="lastName">last name</th>
    <th st-sort="birthDate">birth date</th>
    <th st-sort="balance">balance</th>
    <th>email</th>
</tr>
<tr>
    <th>
        <input st-search="firstName" placeholder="search for firstname" class="input-sm form-control" type="search"/>
    </th>
    <th colspan="3">
        <input st-search placeholder="global search" class="input-sm form-control" type="search"/>
    </th>
    <th>
        <input st-search="{{selectedPredicate}}" placeholder="bound predicate" class="input-sm form-control" type="search"/>
    </th>
</tr>
</thead>
<tbody>
  <tr ng-repeat="row in rowCollection">
    <td>{{row.firstName | uppercase}}</td>
    <td>{{row.lastName}}</td>
    <td>{{row.birthDate | date}}</td>
    <td>{{row.balance | currency}}</td>
    <td><a ng-href="mailto:{{row.email}}">email</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

控制器：

app.controller('testingCtrl', ['$scope', '$filter', function (scope, filter) {
scope.rowCollection = [
    {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
    {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
    {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
];

scope.predicates = ['firstName', 'lastName', 'birthDate', 'balance', 'email'];
scope.selectedPredicate = scope.predicates[0];
}]);

Answer 2

没有解决任何其他问题，只是问题..

您已将控制器命名为“filterCtrl”

所以在你的HTML中：

<div ng-controller="filterCtrl">

angularJS文档： https://docs.angularjs.org/api/ng/directive/ngController

免责声明：这是在回答您的问题。在这里，形状或形状绝不是唯一的问题。

这就是为什么我为你提供别人的jsfiddle供你玩的原因。这是一个todo应用程序，它显示了如何设置角度应用程序，包括：

<div ng-controller="TodoCtrl">

和

  <li ng-repeat="todo in todos">
    <input type="checkbox" ng-model="todo.done">
    <span class="done-{{todo.done}}">{{todo.text}}</span>
  </li>

http://jsfiddle.net/dakra/U3pVM/

在Angular

2 个答案: