2014-01-11 18 views
0

我controller.jsModel對象在視圖中進行

'use strict'; 
var phoneApp=angular.module("phoneApp",[]); 
phoneApp.controller('PhoneListController',function($scope) 
{ 
    $scope.phones=[{name:'NOKIA',model:1010,price:3000},{name:'MOTOROLA',model:5655,price:5000},{name:'SAMSUNG',model:6567,price:8000}]; 
$scope.noOfPhones=$scope.phones.length; 
$scope.addNewPhone=function() 
{ 
    $scope.phones.push({name:$scope.phoneName,model:$scope.phoneModel,price:$scope.phonePrice}); 
}; 
}); 

------------ 
index.html 
------------ 
<!doctype html> 
<html lang="en" ng-app="phoneApp" ng-controller="PhoneListController"> 
<head> 
    <meta charset="utf-8"> 
    <title>My HTML File</title> 

    <link rel="stylesheet" href="css/app.css"> 
    <link rel="stylesheet" href="css/bootstrap.css"> 
    <script src="lib/angular/angular.js"></script> 
    <script src="js/controllers.js"></script> 
</head> 
<body> 
<ul> 
    <li ng-repeat="phone in phones">{{phone.name}} - {{phone.model}} - {{phone.price}}</li> 
</ul> 
<p>Total number of phones: {{noOfPhones}}</p> 
<h3>Add New Phone</h3> 
Phone Name :<input type=text ng-model="phoneName"/> 
Phone Model:<input type=text ng-model="phoneModel"/> 
Phone Price:<input type=text ng-model="phonePrice"/> 
<input type=button value="Add New Phone" ng-click="addNewPhone()"/> 
</body> 
</html> 
------------------------------------------- 

當我使用addNewPhone推元素,推正在發生的事情,但沒有更新手機的總數。 除了在addNewPhone函數內部賦值$ scope.noOfPhones之外,還有其他方法可以觸發它嗎?

回答

0

你可以嘗試:

<p>Total number of phones: {{phones.length}}</p> 

noOfPhones被綁定到一個值(不是引用),這就是爲什麼它沒有更新。