離子內容不允許推送對象。 Showing undefined

我在使用離子框架時遇到了一些問題。我正在嘗試在雜貨應用上工作，用戶可以在其中添加項目。我寫的代碼無法顯示空白字段「未定義」，但當我用「div」標籤替換「ion-content」標籤時，我的代碼工作正常。我很困惑爲什麼會發生這種情況？請幫忙謝謝。離子內容不允許推送對象。 Showing undefined

<ion-content> 
     <div class="grocery-wrapper"> 
      <ion-item ng-repeat="groceryItem in groceryItems"> 
       <div class="row"> 
        <div class="col col-20"> 
         <label class="checkbox checkbox-balanced"> 
          <input class="checkbox" type="checkbox"/> 
         </label> 
        </div> 
        <div class="col col-33 g-items">{{groceryItem.itemName}}</div> 
        <div class="col g-items">{{groceryItem.Quantity}}</div> 
        <div class="col g-items">{{groceryItem.Rate}} rs/kg</div> 
       </div> 
      </ion-item> 

      <div id="getGroceryItem" ng-show="GroceryItem"> 
       <div class="row"> 
        <div class="col col-50"> 
         <label class="item item-input item-floating-label"> 
          <span class="input-label">Grocery Item</span> 
          <input ng-model="gItem" type="text" placeholder="Grocery Item"> 
         </label> 
        </div> 
        <div class="col"> 
         <label class="item item-input item-floating-label"> 
          <span class="input-label">Kg</span> 
          <input ng-model="gKg" type="text" placeholder="kg"> 
         </label> 
        </div> 
        <div class="col"> 
         <label class="item item-input item-floating-label"> 
          <span class="input-label">Price</span> 
          <input ng-model="gPrice" type="text" placeholder="Price"> 
         </label> 
        </div> 
       </div> 
       <div class="row"> 
        <button class="button button-block button-balanced button-medium" ng-click="addGroceryItem()"> 
         ADD ITEM 
        </button> 
       </div> 

      </div> 
     </div> 
     </ion-content>

app.controller('getGrocery', function($scope){ 
    //console.log("Grocery Items"); 
    $scope.groceryItems = [ 
     { 
     'itemName':'Rice', 
     'Quantity':'5kg', 
     'Rate':'50' 
     }, 
     { 
     'itemName':'Wheat', 
     'Quantity':'6kg', 
     'Rate':'44' 
     } 
    ]; 

    //Hide show elemment 
    $scope.GroceryItem = false; 

    $scope.addGroceryItem = function() { 
     //$scope.groceryObj = {}; 
     $scope.groceryItems.push(
      { 
       itemName:$scope.gItem, 
       Quantity:$scope.gKg, 
       Rate:$scope.gPrice 
      } 
     ); 
     console.log($scope.gItem) 
     console.log($scope.gKg) 
     console.log($scope.gPrice) 

     $scope.gItem = ""; 
     $scope.gKg = ""; 
     $scope.gPrice = ""; 
    } 
})

http://i.stack.imgur.com/1at2T.png

來源

2016-07-10 maheshv13

作爲每基準http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

角範圍和原型。

AngularJS通常會在指令的內部創建子作用域，這與我們上面看到的原因相同：它允許指令擁有自己的鍵/值對空間，而不會干擾更高級別的數據。子範圍使用原型繼承從父範圍繼承。（對於隔離示波器有例外）;

但是，我們經常想透明地寫入更高層面的範圍，這就是「點規則」出現的地方。讓我們來看看它是如何應用的。

不要這樣做

//控制器

$scope.gItem = "Test"

// HTML

<input ng-model="gItem">

這是不好的，因爲我們不能從一個子範圍寫，因爲子範圍使用原型繼承。一旦你從子作用域寫入gItem，它就會成爲該子作用域的一個獨特值，並且不再引用父進程的gItem。

相反，這樣做

//控制器

$scope.newItem = { 
     gItem: "", 
     gKg: "", 
     gPrice: "", 
    }

// HTML

<input ng-model="newItem.gItem">

所不同的是，我們不直接存儲示波器上的數據。現在，當ng-model想寫時，它實際上會進行讀取，然後寫入。它從範圍讀取newItem屬性，這將從一個子範圍起作用，因爲子範圍將向上搜索一個讀取。一旦發現newItem，它會寫入newItem.gItem，這是沒有問題的。這只是工作

的index.html應該

<body ng-app="grocery"> 

<ion-pane ng-controller="getGrocery"> 
    <ion-header-bar class="bar bar-header bar-assertive"> 
    <h1 class="title text-center">Grocery</h1> 
    <button class="button" ng-click="GroceryItem=!GroceryItem" ng-class="{active:GroceryItem}"> 
     <i class="icon ion-android-add"></i> 
    </button> 
    </ion-header-bar> 
    <ion-content class="grocery-wrapper"> 
    <ion-list> 
     <ion-item ng-repeat="groceryItem in groceryItems"> 
      <div class="row"> 
       <div class="col col-20"> 
        <label class="checkbox checkbox-balanced"> 
         <input class="checkbox" type="checkbox"/> 
        </label> 
       </div> 
       <div class="col col-33 g-items">{{groceryItem.itemName}}</div> 
       <div class="col g-items">{{groceryItem.Quantity}}</div> 
       <div class="col g-items">{{groceryItem.Rate}} rs/kg</div> 
      </div> 
     </ion-item> 
     <ion-item id="getGroceryItem" ng-show="GroceryItem"> 
      <div class="row"> 
       <div class="col col-50"> 
        <label class="item item-input item-floating-label"> 
         <span class="input-label">Grocery Item</span> 
         <input ng-model="newitem.gItem" type="text" placeholder="Grocery Item"> 
        </label> 
       </div> 
       <div class="col"> 
        <label class="item item-input item-floating-label"> 
         <span class="input-label">Kg</span> 
         <input ng-model="newitem.gKg" type="text" placeholder="kg"> 
        </label> 
       </div> 
       <div class="col"> 
        <label class="item item-input item-floating-label"> 
         <span class="input-label">Price</span> 
         <input ng-model="newitem.gPrice" type="text" placeholder="Price"> 
        </label> 
       </div> 
      </div> 
      <div class="row"> 
       <button class="button button-block button-balanced button-medium" ng-click="addGroceryItem()"> 
        ADD ITEM 
       </button> 
      </div> 

     </ion-item> 
    </ion-list> 
    </ion-content> 
</ion-pane>

app.js應該

app.controller('getGrocery', function($scope){ 
//console.log("Grocery Items"); 
$scope.groceryItems = [ 
    { 
    'itemName':'Rice', 
    'Quantity':'5kg', 
    'Rate':'50' 
    }, 
    { 
    'itemName':'Wheat', 
    'Quantity':'6kg', 
    'Rate':'44' 
    } 
]; 

//Hide show elemment 
$scope.GroceryItem = false; 


$scope.newitem = { 
    gItem: "", 
    gKg: "", 
    gPrice: "", 
} 

$scope.addGroceryItem = function() { 
    //$scope.groceryObj = {}; 
    console.log($scope.newitem.gItem) 
    console.log($scope.newitem.gKg) 
    console.log($scope.newitem.gPrice) 
    $scope.groceryItems.push(
     { 
      itemName:$scope.newitem.gItem, 
      Quantity:$scope.newitem.gKg, 
      Rate:$scope.newitem.gPrice 
     } 
    ); 

    $scope.newitem = { 
     gItem: "", 
     gKg: "", 
     gPrice: "", 
    } 

}

}）;

來源

2016-07-11 16:29:15

離子內容不允許推送對象。 Showing undefined

回答

相關問題