我正在练习angularjs。在下面的例子中,ng-click根本没有触发,不知道为什么。我实际上没有在我的代码中使用任何控制器,可能是因为这样,ng-click没有触发?
的index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp1">
<div ng-init="users=[{name: 'john', city: 'NY', order: 10},{name: 'james', city: 'washington', order: 20},{name: 'william', city: 'seattle', order: 30}]">
<h2>Customers</h2>
Search Customer: <input type="text" ng-model="searchText" placeholder="search customer here">
<br><br>
<table border="2">
<thead>
<tr>
<th ng-click="orderByProperty('name')">Name</th>
<th ng-click="orderByProperty('city')">City</th>
<th ng-click="orderByProperty('order')">Order</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter : searchText | orderBy : orderByProperty : true">
<td>{{user.name | uppercase}}</td>
<td>{{user.city}}</td>
<td>{{user.order | currency}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
app.js
var myApp1 = angular.module('myApp1',[])
function orderByProperty(propertyName){
// alert('dsfdf')
return propertyName;
}
请告诉我上面代码出了什么问题?在代码中使用控制器是强制性的吗?如果不使用,ng-click根本不起作用?
更新
当我用“ng-click
”替换onclick
时,即使被解雇,但排序功能也无效。
UPDATE2:以下是更新后的代码
的index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp1">
<div ng-controller="MyController">
<div ng-init="users=[{name: 'john', city: 'NY', order: 10},{name: 'james', city: 'washington', order: 20},{name: 'william', city: 'seattle', order: 30}]">
<h2>Customers</h2>
Search Customer: <input type="text" ng-model="searchText" placeholder="search customer here">
<br><br>
<table border="2">
<thead>
<tr>
<th ng-click="orderByProperty('name')">Name</th>
<th ng-click="orderByProperty('city')">City</th>
<th ng-click="orderByProperty('order')">Order</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter : searchText | orderBy : orderByProperty : true">
<td>{{user.name | uppercase}}</td>
<td>{{user.city}}</td>
<td>{{user.order | currency}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
app.js
var myApp1 = angular.module('myApp1',[])
myApp1.controller('MyController', ['$scope', function($scope){
$scope. orderByProperty = function(propertyName){
// alert('dsfdf')
return propertyName;
}
}])
上面我使用了控制器,现在甚至连接都会被解雇但排序不按预期工作..
答案 0 :(得分:2)
是的,您需要放置 ng-controller
才能 ng-click
工作。
当控制器通过ng-controller连接到DOM时 指令,Angular将使用。实例化一个新的控制器对象 指定控制器的构造函数。一个新的子范围将是 可用作控制器构造函数的可注入参数 作为$ scope。
详细了解 controller
答案 1 :(得分:0)
正如@Sajeetharan所说,在angularjs中,你调用的所有函数都需要在控制器中声明,这就是它的工作原理
答案 2 :(得分:0)
在使用ng-click
之前,您必须在HTML中添加ng-controller
。
<body ng-app="myApp1" ng-controller="myAppCtrl">
var myApp1 = angular.module('myApp1',[]);
myApp1.controller('myAppCtrl',['$scope',function ($scope) {
$scope.orderByProperty=function(propertyName){
// alert('dsfdf')
return propertyName;
}
}]);
答案 3 :(得分:0)
要使其有效,需要更改2个位置: 使用ng-model值绑定orderBy。
var myApp1 = angular.module('myApp1',[])
myApp1.controller('MyController', ['$scope', function($scope){
$scope. orderByProperty = function(propertyName){
$scope.myorder = propertyName;
}
}])
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp1">
<div ng-controller="MyController">
<div ng-init="users=[{name: 'john', city: 'NY', order: 10},{name: 'james', city: 'washington', order: 20},{name: 'william', city: 'seattle', order: 30}]">
<h2>Customers</h2>
Search Customer: <input type="text" ng-model="searchText" placeholder="search customer here">
<br><br>
<table border="2">
<thead>
<tr>
<th ng-click="orderByProperty('name')">Name</th>
<th ng-click="orderByProperty('city')">City</th>
<th ng-click="orderByProperty('order')">Order</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter : searchText | orderBy : myorder : true">
<td>{{user.name | uppercase}}</td>
<td>{{user.city}}</td>
<td>{{user.order | currency}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>