AngularJS: ввод [число] с заполнителем и ng-моделью

У меня есть следующее поле ввода, на мой взгляд

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

Теперь я хочу установить для переменной total totalClicks начальное значение, которое не отражается в пользовательском интерфейсе, если пользователь не вводит данные.

Если я инициализирую с

$scope.totalClicks = {};

or

$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. Есть 2 текстовых поля, привязанных к одной и той же модели, поэтому, когда я меняю модель в одном поле ввода, другое также должно измениться. (Пример включает ионную структуру) http://plnkr.co/edit/F4fOGMBA8eFJ9vdyuDvm


ionic-framework javascript angularjs placeholder angular-ngmodel
person Thomas Pischulski    schedule 29.04.2014    source источник
comment
Позвольте мне процитировать: Всякий раз, когда у вас есть ng-модель, где-то там должна быть точка... см., например, stackoverflow.com/a/23043335/1679310   -  person Radim Köhler    schedule 29.04.2014
comment
Текущие коды ведут себя так, как требуется, я думаю, не так ли? Проверьте jsfiddle здесь, который я создал jsfiddle.net/a5UyU   -  person Vamshi    schedule 29.04.2014
comment
Смотрите решение ниже, оно не работает (тоже не с точкой)   -  person Thomas Pischulski    schedule 29.04.2014
comment
Я использую angularJS как часть ionicframework. Может ли это быть связано с проблемой?   -  person Thomas Pischulski    schedule 29.04.2014
comment
Вы проверили jsfiddle, можете ли вы уточнить, какая функция, которую вы хотели, недоступна, я что-то упустил?   -  person Vamshi    schedule 29.04.2014
comment
Да, я сделал, и мне интересно, почему это работает там :/   -  person Thomas Pischulski    schedule 29.04.2014
comment
@nephix в некоторых файлах отсутствуют one и два.   -  person meze    schedule 29.04.2014
comment
О спасибо! Я исправил недостающие файлы   -  person Thomas Pischulski    schedule 29.04.2014

Ответы (2)


arrow_upward
1
arrow_downward

Ниже приведен рабочий пример обновления 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/

person suneetha    schedule 29.04.2014
comment
хорошо, я полностью пропустил это, что здесь сделано по-другому :-/ - person Vamshi; 29.04.2014
comment
Я обновил планкер. Я не знаю об этом iconic.js. На самом деле это недоступно в соответствующем uri. Таким образом, angular не может создать модуль для приложения. Если я удалил иконическую зависимость в операторе определения модуля , все работает нормально!! plnkr.co/edit/5foq7qP4scUdUAkrWMKQ - person suneetha; 29.04.2014
comment
Хм, так что проблема, вероятно, вызвана ионным каркасом, я думаю - person Thomas Pischulski; 29.04.2014
comment
Да, точно! Iconic файлы не загружаются в приложение. Просто проверьте инструменты Dev после запуска приложения. - person suneetha; 29.04.2014

arrow_upward
0
arrow_downward

определите значение и модель как свойство объекта totalClicks.

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

<input type="number" min="0" placeholder="7500" ng-model="totalClicks.amount" required>
person adrichman    schedule 29.04.2014
comment
Возможно, нам потребуется добавить $scope.totalClicks={} перед назначением $scope.totalClicks.amount = 0 . Не так ли?? или это было очевидно :| - person Vamshi; 29.04.2014
comment
см. приведенное выше редактирование. вам нужно определить $scope.totalClicks, прежде чем вы сможете установить для него свойство - person adrichman; 29.04.2014
comment
В вашем решении не отображается заполнитель, он отображает 0 в поле ввода. Я что-то упускаю? - person Thomas Pischulski; 29.04.2014
comment
Ой! Я неправильно понял вопрос. Просто удалите вторую строку (не объявляйте totalClicks.amount = 0) - person adrichman; 29.04.2014
comment
Затем $scope.totalClicks является Object {} во время выполнения - person Thomas Pischulski; 29.04.2014
comment
как я уже исправил в предыдущем примере, не объявляйте $scope.funnel = {}; - person adrichman; 29.04.2014
comment
Если я этого не сделаю: TypeError: невозможно установить свойство totalClicks неопределенного - person Thomas Pischulski; 29.04.2014