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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angular.js传递选择到ng-click功能相关的知识,希望对你有一定的参考价值。

我无法弄清楚我应该如何以角度完成这项任务。以下代码包含在项目中的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"或其他内容。

以上是关于angular.js传递选择到ng-click功能的主要内容,如果未能解决你的问题,请参考以下文章

Angular Js Datatable:在响应式插件中,ng-click 在缩放(折叠)模式下不起作用

使用 Angular JS 选择所有复选框

在 Angular js 中跨 2 个控制器选择的绑定值

ng-click 事件不适用于 ocLazyLoad

Angular.js 移动浏览器应用程序在 iOS 8 Safari 上冻结

ng-click