Question

我的视图中有以下输入字段

<input type="number" min="0" placeholder="7500" ng-model="totalClicks" required>

我现在想要的是将模型变量total totalClicks设置为初始值，除非用户输入，否则该初始值不会反映到UI。

如果我用

初始化

$scope.totalClicks = {};

或

$scope.totalClicks = '';

然后正确显示占位符，直到用户输入。但是，模型变量totalClicks不会更新并保持初始化状态。

如果我将其设置为

$scope.totalClicks = 0;

然后0显示在输入中，占位符不是，但模型已更新。

有任何建议吗？

更新

加

$scope.funnel = {};
$scope.funnel.totalClicks = 9;
<input type="number" min="0" placeholder="7500" ng-model="funnel.totalClicks" required>

现在占位符显示在页面加载上，但当我更改输入时，$scope.funnel.totalClicks仍为9

更新＃2： 这是关于plunker的一个例子。有两个文本框绑定到同一个模型，因此当我在一个输入框中更改模型时，另一个也应该更改。（例子包括离子骨架） http://plnkr.co/edit/F4fOGMBA8eFJ9vdyuDvm

Answer 1

以下是更新totalClicks ngModel的工作示例。

<html ng-app="ExamplesApp">  
  <head> 
    <script src="angular.js"></script>   
  </head>  
 <body ng-controller="ExCtrl">
   <input type="number" min="0" placeholder="7500" ng-model="totalClicks" required>
   <button ng-click="clicks()">Click</button>   
   <script type="text/javascript">
     angular.module('ExamplesApp',[]);
     angular.module('ExamplesApp')
      .controller('ExCtrl',function($scope){
        $scope.totalClicks = '';         
        $scope.clicks= function(){
          alert($scope.totalClicks);
        };
      });
   </script>
 </body>
</html>

JSFiddle： http://jsfiddle.net/StT2y/2/

Answer 2

将值和模型定义为totalClicks对象的属性。

$scope.totalClicks = {}
$scope.totalClicks.amount = 0;

<input type="number" min="0" placeholder="7500" ng-model="totalClicks.amount" required>

AngularJS：输入[number]和占位符＆amp; NG-模型

2 个答案: