我正在学习棱镜,所以请和我一起露出来。
我有一个添加按钮,它使用一个指令来添加一个表(.estimates)tbody:
function EstimateCtrl( $scope, $compile ) {
$scope.services = [
{ 'value': 'c', 'name': 'Standard Courier' },
{ 'value': 'xc', 'name': 'Express Courier' },
{ 'value': 'cc', 'name': 'Country Courier' }
]
$scope.add = function() {
angular.element('.estimates tbody').append( $compile('<tr estimate></tr>')($scope) );
}
}
angular.module('dashboard', [])
.directive('estimate', function() {
return {
restrict: 'A',
template: '<td><input type="text" placeholder="Suburb"/></td><td><select ng-model="estimate.service" ng-options="service.value as service.name for service in services" class="form-control"></select></td><td>$0.00</td><td><button type="button" class="remove">x</button></td>',
link: function( scope, element, attrs ) {
element.find('.remove').bind('click', function() {
element.closest('tr').remove();
});
}
}
});
如何在angularjs中使用ng-model的元素数组?例如:
<select name="foo[]"></select>
到
<select ng-model="foo[]"></select>
我一直在挖掘一天半,但我似乎无法休息一下。我希望有人可以指出我正确的方向。非常感谢您的帮助。
编辑:以下是关于plunker的链接我确定看到这一切后每个人都知道我在做什么: http://plnkr.co/edit/JlYB9P0vyAqghOmeNYh4
编辑2:让我们看看我是否可以再举一个例子向您展示我的目标
<form method="POST" action="">
<!-- I was attempting to do ng-model="estimate.service[]" but of course this doesn't work -->
<select name="estimate[service][]">
<option value="foor">Foo</option>
<option value="bar">Bar</option>
</select>
<select name="estimate[service][]">
<option value="foor">Foo</option>
<option value="bar">Bar</option>
</select>
<select name="estimate[service][]">
<option value="foor">Foo</option>
<option value="bar">Bar</option>
</select>
<input type="submit" value="Submit"/>
</form>
<?php
if ( $_POST )
{
print_r( $_POST['estimate']['service'] );
}
?>
输出
答案 0 :(得分:6)
Ohrighty!我设法找到了解决方法。
我放弃了指令,并采取了另一种方式,这是我的工作代码:
<强> HTML:强>
<div ng-controller="Ctrl">
<table>
<tbody ng-repeat="service in estimate.services">
<tr>
<td><input type="text" placeholder="Suburb"/></td>
<td>
<select ng-model="estimate.services[service.name]" ng-options="option.value as option.name for option in options" class="form-control"></select>
</td>
<td>$0.00</td>
<td><button type="button" class="remove">x</button></td>
</tr>
</tbody>
</table>
</div>
<强> JavaScript的:强>
function Ctrl( $scope, $compile ) {
$scope.estimate.services = [
{ name: 'service1', value: '' }
];
$scope.options = [
{ name: 'Option 1', value: 'opt1' },
{ name: 'Option 2', value: 'opt2' },
{ name: 'Option 3', value: 'opt3' }
];
$scope.add = function() {
$scope.estimate.services.push({
name: 'service' + ($scope.estimate.services.length + 1),
value: ''
});
};
}
答案 1 :(得分:0)
<强>编辑:强>
好吧,假设您有两个可配置选项数组:
options1=[...]
options2=[...]
现在,如果我理解正确,你想要一个能让你选择其中一组的选择框吗?所以首先你需要将它们都包含在另一个数组中,或者如同在另一个对象之前提到的那样。
所以让我们使用一个对象(我也可以提供一个数组示例)
var $scope.myOptions ={'LabelForOptions1' : options1, 'LabelForOptions2' : options2}
接下来,我们需要一个地方来存储选择的选项
$scope.selectedOptions = {};
最后是选择框本身
<select ng-model="selectedOptions" ng-options="value as key for (key,value) in myOptions"></select>
请注意,options1和options2变量也可以是单个值,示例仍可以使用
问题的完整解决方案: 我认为这是你的模特:
function MyController($scope) {
$scope.options1 = ['Foo1','Bar1'];
$scope.options2 = ['Foo2','Bar2'];
$scope.options3 = ['Foo3','Bar3'];
$scope.allOptions = [$scope.options1, $scope.options2, $scope.options3];
$scope.selectedOptions = ["none","none","none"];
};
所以这就是解决方案:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="./js/myAngular.js"></script>
</head>
<body ng-controller="MyController">
<div><select ng-repeat="option_set in allOptions"ng-model="selectedOptions[$index]" ng-options="value for value in option_set">
</select></div>
</body>
</html>