Question

我在使用离子框架时遇到了一些问题。我正在尝试使用Grocery app在哪里用户可以添加项目。我写的代码不能显示带有空白字段的“未定义”但是当我用“div”标签替换“ion-content”标签时，我的代码工作正常。我很困惑为什么会这样？请帮助谢谢。

<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

Answer 1

根据参考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:  "",
    }

}

}）;

ion-content不允许推送对象。显示未定义

1 个答案: