问题描述
我学习angularjs所以请裸跟我来。
I'm learning angularjs so please bare with me.
我有一个使用指令添加到一个表的（.estimates）添加按钮TBODY：
I have an add button that uses a directive to add-to a table's (.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();
});
}
}
});
我怎样才能在使用NG-模型angularjs元件阵列？例如：
How can I have an element array using ng-model in angularjs? For example:
<select name="foo[]"></select>
到
<select ng-model="foo[]"></select>
我一直在四处寻找了一天半，但我似乎无法喘息的机会。我希望，也许有人可以点我在正确的方向。非常感谢您的任何帮助。
I've been digging around for a day and half but I can't seem to catch a break. I was hoping that maybe someone can point me in the right direction. Thank you very much for any help.
编辑：下面是对plunker链接我看到这每个人都会知道我的后约敢肯定：
Here is the link to the plunker I'm sure after seeing this everyone is going know what I'm on about:http://plnkr.co/edit/JlYB9P0vyAqghOmeNYh4
EDIT2：让我们来看看，如果我可以给你所有的另一个例子告诉你什么是我在
Let's see if I can give you all another example to show you what I'm after
<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'] );
}
?>
输出
推荐答案
Ohrighty！我设法寻找周围的工作。
Ohrighty! I managed to find a work around.
我已经放弃了指示，做了另一种方式，这是我的工作code：
I have abandoned directives and did it another way, here is my working code:
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: ''
});
};
}
这篇关于angularjs - 名阵列纳克模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！