在角 - VoidCC

<!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: '[email protected]'}, 
    {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: '[email protected]'}, 
    {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: '[email protected]'} 
]; 

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

使用控制器我試圖創建使用控制器的角度表，但我不知道NG-控制器的語法。任何人都可以幫助語法？我只是一個初學者，所以我不太熟悉所有的確切語法。

來源

2015-10-20 henry

不解決任何其他問題，只是問題..

您已經命名自己的控制器 'filterCtrl'

在HTML

所以：

<div ng-controller="filterCtrl">

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

免責聲明：這是回答你的問題。絕不是形狀或形式，這是你唯一的問題。

這就是爲什麼我給你提供別人的jsfiddle給你玩。這是一個待辦事項應用程序，它展示瞭如何建立一個角度應用程序包括：

<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/

來源

2015-10-20 03:06:48

這裏是你的代碼的工作plunker：http://plnkr.co/edit/7IQvbFQQTMJjHVlNBcr8?p=preview

您在控制器中使用了controllerAs語法和$ scope。我已經更新它是一致的。你也有ng-controller在一個沒有包裝你的代碼的div中定義。這也已更新。

更新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="[email protected]"></script> 
    <script data-require="[email protected]" 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: '[email protected]'}, 
    {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: '[email protected]'}, 
    {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: '[email protected]'} 
]; 

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

來源

2015-10-20 03:21:04 buzzsaw

在角

回答

相關問題