2015-04-28 2 views
2

У меня возникает странная проблема при выполнении метода .push() в угловой коллекции js. В консоли я вижу, что объект добавлен, но я не вижу его в списке.Push to Angular JS Array

$scope.discountCodes.push({ 
       discountCodeId: 0, 
       name: $scope.discountModel.name, 
       code: $scope.discountModel.code, 
       codeValue: $scope.discountModel.codeValue, 
       valueType: $scope.discountModel.valueType, 
       startDate: $scope.discountModel.startDate, 
       endDate: $scope.discountModel.endDate, 
       isActive: "True" 
      }); 

У меня есть простой ретранслятор в сочетании с шаблоном

<div ng-repeat="discount in discountCodes" ng-include="getTemplate(discount)"> 
           </div> 
    <script type="text/ng-template" id="display"> 
        <div class="row"> 
         <div class="col-md-3"> 
          <span>Name:<br />{{discount.Name}}</span> 
         </div> 
         <div class="col-md-2"> 
          <span>Code:<br />{{discount.Code}}</span> 
         </div> 
         <div class="col-md-2"> 
          <span>Value:<br />{{discount.CodeValue}}</span> 
         </div> 
         <div class="col-md-2"> 
          <span>Active:<br /></span> 
          <i class="icon-circle green-fill" 
           ng-show="discount.IsActive"> 
          </i> 
          <i class="icon-circle red-fill" 
           ng-show="!discount.IsActive"> 
          </i> 
         </div> 
         <div class="col-md-2"><br /> 
          <a href="#" ng-click="editDiscount(discount)" id="lnkEditRow" name="lnkEditRow" class="gray-fill"><i class="icon-edit icon-2x"></i></a> 
         </div> 
        </div> 
       </script> 

Это метод: $ scope.discountModel.formSubmit = функция (пункт, событие) {

 $scope.alertMessageContainerVisible = false; 

     if ($scope.frmDiscountForm.$valid) { 
      var dataObject = { 
       discountCodeId: 0, 
       name: $scope.discountModel.name, 
       code: $scope.discountModel.code, 
       codeValue: $scope.discountModel.codeValue, 
       valueType: $scope.discountModel.valueType, 
       startDate: $scope.discountModel.startDate, 
       endDate: $scope.discountModel.endDate, 
       isActive: "True" 
      }; 
      action = "NEW"; 

      $scope.discountCodes.push(dataObject) 
      }); 
     } 
    } 

Любые идеи полезны, я новичок в Angular JS, поэтому будьте легко на меня :)

Я создал очень простую версию этого ниже: http://plnkr.co/edit/qJDU7uiFleWIOjR5LYFh

+1

Я думаю, что JSON чувствителен к регистру. Попробуйте 'discount.name' вместо' discount.Name' в вашем шаблоне. – Pete

+0

показать, где вы вызываете это нажатие. Если это событие за пределами углового мира, вам нужно уведомить углы, чтобы запустить дайджест – charlietfl

+0

Как сказал @Pete, JSON чувствителен к регистру, вы вызываете каждое свойство JSON внутри шаблона с заглавной буквой как discount.Name. например, – Fals

ответ

2

Похоже, что вы можете обновлять коллекцию за пределами углового контекста. Если это так, вам нужно использовать $ scope. $ Apply() для Angular, чтобы увидеть ваши изменения.

+0

Я создал эту простую версию: http: //plnkr.co/edit/qJDU7uiFleWIOjR5LYFh –

+0

Я заметил несколько вещей в первом Plunker, который вы опубликовали. У вас есть несколько ссылок на один и тот же ng-контроллер на одном и том же представлении. Вы должны ссылаться только на контроллер один раз. Кроме того, убедитесь, что вы используете один и тот же корпус между моделью и вашим контроллером. Например, в вашей форме вы используете ng-model = "discountModel.name", где имя - верблюд. В вашей модели на контроллере и в шаблоне вы используете корпус Pascal «Имя». Вот Plunker, который показывает пример работы с несколькими изменениями. http://plnkr.co/edit/FyJf1WKtdaheAgDtJIF5?p=preview – jake

+0

Я рассмотрел ваш второй Plunker и сделал несколько изменений, чтобы заставить его работать. Те же общие пункты из моего предыдущего сообщения применяются. Обязательно включайте только одну ссылку на ng-controller и убедитесь, что вы используете один и тот же корпус между вашей моделью и представлением. Вы также можете рассмотреть возможность использования ng-submit для отправки данных формы вашему контроллеру. Вот модифицированный Plunker. http://plnkr.co/edit/YNIEb7z8cEZfILTKszHq?p=preview – jake

0

Оказалось, что это глупая ошибка! Я определил свой контроллер в теле и в div, так что это было в двух местах. Теперь все работает хорошо!

Спасибо всем, это был хороший опыт обучения