0
以下のコードでは、$scope.contactListには、各連絡先のisActiveフラグのある連絡先のリストが含まれています。htmlページからangular関数を呼び出すと、どのように動作するのですか？
コントローラーから$scope.getInactiveCountを呼び出すと、非アクティブな連絡先がカウントされます。
HTMLからその関数を呼び出すとどうなりますか？毎回DOMがロードされたり実行されたりすると一度実行されますか？
新しい連絡先がリストに追加されるたびに、$scope.getInactiveCountはどのように機能をトリガーしますか？
HTMLページから呼び出される角度関数の流れを知りたいと思います。
app.js
angular.module('demo',[]).controller('demoController',function($scope){
$scope.contactList=[{firstName:'John',lastName:'Moody',isActive:'Y'},
{firstName:'Chris',lastName:'George',isActive:'Y'},
{firstName:'Anabella',lastName:'Maze',isActive:'N'},
{firstName:'Joseph',lastName:'Butler',isActive:'Y'},
{firstName:'Roni',lastName:'Ray',isActive:'N'},
{firstName:'Tim',lastName:'Cook',isActive:'Y'},
{firstName:'Angel',lastName:'Christina',isActive:'N'}];
$scope.getInactiveCount=function(){
var count=0;
$scope.contactList.forEach(function(d){
if(d.isActive=='N')
count++;
})
return count;
};
$scope.addContact=function(firstName,lastName){
var contact={firstName:firstName,lastName:lastName,isActive:'N'};
$scope.contactList.push(contact);
}
});
index.htmlを
<!DOCTYPE html>
<html>
<head>
<title>Calling Angular function from HTML</title>
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div data-ng-app='demo'>
<div data-ng-controller='demoController'>
Inactive contacts count: {{getInactiveCount()}}
<br/>
<div>
<input type=text ng-model="firstname">
<input type=text ng-model="lastname">
<br>
<input type='button' value='Add contact' ng-click='addContact(firstname,lastname)' >
</div>
</div>
</div>
</body>
</html>
「DOM」がロードされると1回実行されます。 –
これは角度101のものです –
関数はすべてのダイジェストサイクルと呼ばれるので、関数を{{}} 'の束縛に入れないようにしてください。 – georgeawg