如何以角度访问弹出模型控制器中的ng-model值? [英] How to access ng-model value in controller of popup model in angular?

问题描述

我想从控制器中访问 ngModel，但这里的 ngModel 是在弹出输入字段中定义的.我想访问控制器中的数量和名称值.请注意，这整个代码是模型弹出窗口.

型号代码

<离子头栏><h1 class="title">项目详情</h1></ion-header-bar><ion-content padding="true"><form ng-submit="addItem()"><div class="list list-inset"><label class="item item-input"><span class="input-label">名称</span><input type="text" name="name" ng-model="name"><label class="item item-input"><span class="input-label">数量</span><input type="number" name="qty" ng-model="qty"><div class="padding item text-center"><button class="button button-dark">添加到购物车</button><a class="button button-assertive" ng-click="closeModal()">取消</a>

</表单></离子含量></ion-modal-view>

控制器代码

.controller('GuestDetailsCtrl', function($scope){$scope.addItem = function() {警报($scope.name)；警报($scope.qty)；};});

解决方案

您可以尝试在函数中提供参数，如下所示:

<离子头栏><h1 class="title">项目详情</h1></ion-header-bar><ion-content padding="true"><form ng-submit="addItem(params)"><div class="list list-inset"><label class="item item-input"><span class="input-label">名称</span><input type="text" name="name" ng-model="params.name"><label class="item item-input"><span class="input-label">数量</span><input type="number" name="qty" ng-model="params.qty"><div class="padding item text-center"><button class="button button-dark">添加到购物车</button><a class="button button-assertive" ng-click="closeModal()">取消</a>

</表单></离子含量>

在你的控制器中:

 .controller('GuestDetailsCtrl', function($scope){$scope.addItem = 函数(参数){警报(参数.名称)；警报(参数.数量)；};});

I want to access an ngModel from within a controller, but here the ngModel is defines in a popup input field. I want to access the qty and name values in controller. Note that this whole code is model popup.

Model code

<ion-modal-view> 
    <ion-header-bar>
        <h1 class="title">Item Details</h1>
    </ion-header-bar>
    <ion-content padding="true">
        <form ng-submit="addItem()">
            <div class="list list-inset">
                <label class="item item-input">
                    <span class="input-label">Name</span>
                    <input type="text" name="name" ng-model="name">
                </label>
                <label class="item item-input">
                    <span class="input-label">Qty</span>
                    <input type="number" name="qty" ng-model="qty">
                </label>
                <div class="padding item text-center">
                    <button class="button button-dark">Add To Cart</button>
                    <a class="button  button-assertive" ng-click="closeModal()">Cancel</a>            
                </div>
            </div>
        </form>
    </ion-content>
</ion-modal-view>

Controller code

.controller('GuestDetailsCtrl', function($scope){
    $scope.addItem = function() {
        alert($scope.name);
        alert($scope.qty);
    }; 
});

解决方案

You could try to give params in the function like this :

<ion-modal-view> 
<ion-header-bar>
    <h1 class="title">Item Details</h1>
</ion-header-bar>
<ion-content padding="true">
    <form ng-submit="addItem(params)">
        <div class="list list-inset">
            <label class="item item-input">
                <span class="input-label">Name</span>
                <input type="text" name="name" ng-model="params.name">
            </label>
            <label class="item item-input">
                <span class="input-label">Qty</span>
                <input type="number" name="qty" ng-model="params.qty">
            </label>
            <div class="padding item text-center">
                <button class="button button-dark">Add To Cart</button>
                <a class="button  button-assertive" ng-click="closeModal()">Cancel</a>            
            </div>
        </div>
    </form>
</ion-content>

And in your controller :

   .controller('GuestDetailsCtrl', function($scope){
      $scope.addItem = function(params) {
          alert(params.name);
          alert(params.qty);
      }; 
  });

这篇关于如何以角度访问弹出模型控制器中的ng-model值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！