angular.js传递选择到ng-click功能

Posted 2021-03-27

我无法弄清楚我应该如何以角度完成这项任务。以下代码包含在项目中的ng-repeat'项目中。为了简化，我把它留了下来。

我想要做的是使用'addItem（）'函数传递我的选择值。因此，当有人点击按钮时，他们不仅会传递“项目”，还会传递此特定项目的选择值。也许选项的值作为数组传递，但我仍然不知道如何实现它。

<div>
  <span class="balanced">$ {{item.price/100 | currency:''}}</span>
  <br/>
  <div ng-repeat="style in item.styles">
    <label class="input-label">{{style.style}}</label>
    <select>
      <option ng-repeat="option in style.options" value="{{option.option}}">
        {{option.option}}
      </option>
    </select>
  </div>
  <button class="button button-icon ion-plus" ng-click="addItem(item)">
    add
  </button>
</div>

以下是“项目”数据的示例。

{
   "productID": "4",
   "title": "Blouse",
   "description": "a nice blouse for any occasion",
   "price": "2000",
   "link": "http://productlink.com",
   "img": "http://imagelink.com",
   "styles": [{
     "style": "size",
     "options": [{
       "option": "9"
     }, {
       "option": "10"
     }, {
       "option": "11"
     }]
   }, {
     "style": "color",
     "options": [{
       "option": "red"
     }, {
       "option": "blue"
     }, {
       "option": "green"
     }]
   }]
 }

答案

首先，我建议你在选择中使用ng-options而不是在这里选择嵌套ng-repeat

<select ng-model="selectedItem" 
ng-options="option.option for option in style.options" />

然后我会将selectedItem传递给你的addItem函数，如下所示：

<button class="button button-icon ion-plus" ng-click="addItem(selectedItem)">
add
</button>

编辑：您必须更改ng-repeat（并删除选项标签）。将ng-model与select-tag上的ng-options一起使用。如果你想让它轻松工作，这不是一个建议。这样你就可以删除select的范围，你的selectedItem将在同一个范围内（这种情况下整个控制器 - 假设你的控制器是你发布的div的范围）作为按钮和select标签。

编辑：我想我终于明白了你想要的。一种方法是跟踪您的模型（项目）选择哪些选项。当您单击按钮时，某些代码将读取模型并执行任何需要执行的操作。由于我不知道你想用它做什么，我创建了一个简单的plunker示例，只是将值写入div。您可以将其传递给服务/方法以保存它或其他：

http://plnkr.co/edit/G0K6sU6GC92nEP3wKmQG

编辑：只是想补充一点，您可能希望将选项保存在与原始$scope.item不同的对象上。您可以将ng-model更改为ng-model="myitem.selectedOption"或其他内容。