Question

我有一个表格可以在ng-submit上提交。表格内部是一个有选择框的表格。我无法将选择框中选择的值传递给控制器内的功能。这是代码

<form name="formExeOptions" role="form" novalidate class="ng-scope ng-invalid ng-invalid- 
    required ng-dirty ng-valid-minlength" ng-submit="createExecutionStepOption(caseExecution.id,formExeOptions.optionSel.value)">
    <h4>Add an execution step option</h4>

    <div class="table-responsive">
        <table>
            <thead>
                <tr>
                    <th>Step</th>
                    <th>Name</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <select name="optionSel">
                            <option name="TOPPER" value="1" selected>TOPPER</option>
                            <option name="RSC" value="2">RSC</option>
                            <option name="SPD" value="3">SPD</option>
                            <option name="SFT" value="4">SFT</option>
                            <option name="LMP" value="5">LMP</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" class="form-control" name="nameOption" ng-model="exeoption.name">
                    </td>
                    <td>
                        <input type="text" class="form-control" name="valueOption" ng-model="exeoption.value">
                    </td>
                    <td>
                        <button type="submit" class="btn btn-default">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</form>

有人可以提供正确的语法吗？

Answer 1

我发表了关于将optionSel绑定到范围值并在提交函数中进行检查的注释。 Here's a demo

首先是相关部分，我将select标记更改为：

<select name="optionSel" ng-model="selectedOption" ng-options="option.value as option.name for option in options"></select>

我们将值绑定到selectedOption并使用ng-options（documentation）来指示它在哪里找到选项，哪个字段是名称，哪个是值。这种情况下的格式为[item name].[value property] as [item name].[name property] for [item name] in [array of items on scope]。然后我们在控制器中声明该项目数组，并为selectedOption提供默认值。

其次，我从提交函数调用中删除formExeOptions.optionSel.value参数。

以下是控制器中的相关部分：

// define your array of possible options
$scope.options = [
    {name: 'TOPPER', value:'1'},
    {name: 'RSC', value:'2'},
    {name: 'SPD', value:'3'},
    {name: 'SFT', value:'4'},
    {name: 'LMP', value:'5'},
  ];

$scope.selectedOption = '1'; // default value

// omitted for brevity

// your submit function
$scope.createExecutionStepOption = function(caseExecutionId) {
  // do whatever. you can access the selected option using $scope.selectedOption
};

角度形式不选择选项值

1 个答案: