Question

我有产品清单，每个产品使用都会在我的控制器中添加一些我需要的数量。

产品清单未修复，可能是10个产品（数量为10个输入框）或者可能是100个产品。

在HTML中，这是我的代码

import UIKit

class WelcomeSliderViewController: UIViewController, UIScrollViewDelegate{

    @IBOutlet weak var slideScrollView: UIScrollView!
    @IBOutlet weak var pagerControl: UIPageControl!

    override func viewDidLoad() {
        super.viewDidLoad()
        slideScrollView.delegate = self
        let slides = createSlides()
        setupSliderView(slides: slides)
        pagerControl.numberOfPages = slides.count
        pagerControl.currentPage = 0
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }



    @IBAction func pagerControlClicked(_ sender: Any) {
        self.slideScrollView
            .scrollRectToVisible(CGRect(
                x: Int(self.slideScrollView.frame.size.width) * self.pagerControl.currentPage,
                y: 0,
                width:Int(self.slideScrollView.frame.size.width),
                height: Int(self.slideScrollView.frame.size.height)),
                                 animated: true)
    }


    func createSlides() -> [UIView] {
        let firstSlide: FirstSlide = Bundle.main.loadNibNamed("FirstSlide", owner:self , options: nil)?.first as! FirstSlide
 let secondSlide: SecondSlide = Bundle.main.loadNibNamed("SecondSlide", owner:self , options: nil)?.first as! SecondSlide

        firstSlide.addGradient()


return [firstSlide, SecondSlide]

    }

    func setupSliderView(slides:[UIView]) {
        slideScrollView.frame = CGRect(x: 0, y:0, width: view.frame.width, height: view.frame.height)
        slideScrollView.contentSize = CGSize(width: view.frame.width * CGFloat(slides.count), height: view.frame.height)

        for i in 0 ..< slides.count{
            slides[i].frame = CGRect(x: view.frame.width * CGFloat(i), y: 0, width: view.frame.width, height: view.frame.height)
            slideScrollView.addSubview(slides[i])
        }

    }

    func scrollViewDidEndDecelerating(_ scrollView : UIScrollView){
        let pageIndex = round(scrollView.contentOffset.x / view.frame.width)
        pagerControl.currentPage = Int(pageIndex)
    }

}

我不明白如何在控制器

中获得此值以及pid

<div class="col m3" ng-repeat="product in productlist" ng-cloak>

  <h6 style="font-size:14px;">{{ product.product_name }}</h6>
  <input ng-modal="qty[product.pid]" placeholder="Qty" type="number"> 

  <button class="btn-flat" ng-click="addQty(product.pid)">ADD</button>
</div>

由于

Answer 1

我已更新我的回答

＆＃13;

angular.module('myApp', [])
  .controller('myController', function($scope) {
    
	
	//$scope.productlist = [];
	$scope.modelData = {};
	$scope.productlist = {
		0:{"pid" : 1,
		"product_name" : "Laptop",
		
		},
		1:{"pid" : 2,
		"product_name" : "Computer",
		
		},
		2:{"pid" : 3,
		"product_name" : "Camera",
		
		},
		3:{"pid" : 4,
		"product_name" : "Tv",
		
		}
	}
	$scope.addQty = function(pid){
	alert(pid)
	console.log($scope.modelData[pid])
	}
  });

＆＃13;

<html ng-app="myApp">

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
  <script type="text/javascript" src="app.js"></script>
  
  <title>Angular-Google-Charts Example</title>
</head>

<body>
  <div class="modal" style="background-color: #EDEEF1;" ng-controller="myController">
        <div class="col m3" ng-repeat="product in productlist" ng-cloak>

			<h6 style="font-size:14px;">{{ product.product_name }}</h6>
			<input ng-model="modelData[product.pid]" placeholder="Qty" type="number"> 

			<button class="btn-flat" ng-click="addQty(product.pid)">ADD</button>
		</div>
    </div>
</body>

</html>

＆＃13;

请查看此演示。让我知道它是否有效！

Answer 2

在这里你不应该像在代码中那样尝试传递id。而不是将整个对象传递给函数，当您操作其属性时，它将同时在页面上生效。这就是你如何获得数量变化的实时效果。

因此修改 addQty 函数的参数。

 <div class="col m3" ng-repeat="product in productlist" ng-cloak>
   <h6 style="font-size:14px;">{{ product.product_name }}</h6>
   <input ng-modal="qty[product.pid]" placeholder="Qty" type="number"> 
   <button class="btn-flat" ng-click="addQty(product)">ADD</button>
 </div>

然后，您可以访问该函数中的产品对象的任何属性。如下所示：

// ORDER ADD   
$scope.addQty = function (product) {

    //$scope.qty = {};
    //$scope.product = $scope.productlist;  

    console.log(product.pid);  

    var getlistURL = $scope.baseURL+$scope.uri.uri_1+"/"+$scope.uri.uri_2+"/ng_add_to_cart/"+product.pid+"/";

    $http.post(getlistURL).
    success(function(data, status) {

        if(data.length != 0) {
            $scope.stockmovement = data;    
            $('#showStockMovement').modal('open');
        } 
    });
};

这是你的解决方案。

Answer 3

根据可用的有限信息推断，我的猜测是您尚未初始化数组qty。
您应该将qty数组初始化为等于productlist长度的长度，并将所有初始值设置为0。

$scope.qty = [];
var initQty = function(){
for(var i = 0;i<$scope.productlist.length;i++){
    $scope.qty[i]=0;
}
}();

除此之外，在将ng-modal更改为ng-model之后，您的代码看起来很正常，正如其他人已经建议的那样。

Answer 4

如果您的产品列表属于此类型。

$scope.productlist = 
    [
    {product_name: "Soap",  pid: 25},
    {product_name: "Bag",   pid: 100}
];

使用此代码

<div class="col m3" ng-repeat="product in productlist">
   {{ product.product_name }}
   <input ng-model="product.pid" placeholder="Qty" type="number"> 
   <button class="btn-flat" ng-click="addQty(product)">ADD</button>
 </div>

如果您想手动输入pid并在控制器中获取价值并且不想附加产品列表

 <div class="col m3" ng-repeat="product in productlist">
   {{ product.product_name }}
   <input ng-model="qty" placeholder="Qty" type="number"> 
   <button class="btn-flat" ng-click="addQty(qty)">ADD</button>
 </div>

并且在您的代码类型错误中有更改＆＃34; ng-modal＆＃34;到＆＃34; ng-model＆＃34;

好像你只想要数量这么好，试试第二个

Answer 5

https://plnkr.co/edit/gBLx1iIWL4x84ldtQAtF?p=preview

这是一个工作的plunker ..我做的更改只有2 ng模型而不是ng-modal并初始化qty作为对象所以现在你的数量将用pid作为对象的关键存储，qty作为对象的值存储

例如： -

{ "1" : 6, "2" :12}

所以你可以用这个

基本上拥有你想要的产品

Answer 6

ng-repeat是一个独立的范围，因此在ng-repeat中创建的模型变量无法在控制器中访问。

为了解决您的要求，我们可以采用两种方法

1.您可以将产品ID和数量作为两个参数传递，并在函数中检索

 <body ng-app="myApp" ng-controller="myCtrl">
  <div class="col m3" ng-repeat="product in productlist" ng-cloak>

   <h6 style="font-size:14px;">{{ product.product_name }}</h6>
   <input ng-model="qty" placeholder="Qty" type="number"> 

   <button class="btn-flat" ng-click="addQty(product.id,qty)">ADD</button>

  </div>`

但是这种方法我们没有跟踪所有产品和所有数量，请检查下面的plunker https://plnkr.co/edit/zAz6FVgazOH4NWYpKb4u?p=preview

2.第二个approch遵循ControllerAs概念，而不是使用$ scope，我们使用ControllerAs来获取控制器模型中的值。

    <body ng-app="myApp" ng-controller="myCtrl as ctl">
  <div class="col m3" ng-repeat="product in ctl.productlist" ng-cloak>

   <h6 style="font-size:14px;">{{ product.product_name }}</h6>
   <input ng-model="ctl.qty[product.id]" placeholder="Qty" type="number"> 

   <button class="btn-flat" ng-click="ctl.addQty(product.id)">ADD</button>

  </div>

  {{ctl.qty}}

在这种方法中，我们可以构建一个名为qty的对象，我们可以跟踪所有产品和数量

请检查以下plunker这种方法 https://plnkr.co/edit/QIVGt8MCdPRAhHaqVA64?p=preview

希望这符合您的要求

使用angularjs中的ng-model获取动态输入值

6 个答案: