在View中进行更改后,模型对象不会刷新

时间:2014-01-11 05:46:38

标签: javascript angularjs model-view-controller binding

我的controller.js

'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之外,还有其他方法可以触发吗?

1 个答案:

答案 0 :(得分:0)

你可以尝试:

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

noOfPhones绑定到一个值(不是引用),这就是它没有更新的原因。