我无法弄清楚我应该如何以角度完成这项任务。以下代码包含在项目中的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"
}]
}]
}
答案 0 :(得分:0)
首先我会建议你在选择中使用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"
或其他内容。
答案 1 :(得分:0)
一种方法是初始化styleSelections
对象,并将选择值与ng-model
绑定:
<div ng-repeat="item in items" ng-init="styleSelections={}">
<span class="balanced">$ {{item.price/100 | currency:''}}</span>
<br/>
<div ng-repeat="style in item.styles">
<label class="input-label">{{style.style}}</label>
<select ng-model="styleSelections[style.style].choice">
<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, styleSelections)">
add
</button>
</div>
ng-init
指令将属性添加到每个项目的子作用域,而ng-click
指令将其值传递给控制器中的addItem()
方法。