如何将选择值传递给Angularjs模态表单

Question

我确信这对你们来说是一个非常简单的问题，但我被困住了。我有一个模态 angularjs 表单，我想在按下“分配”按钮时执行一个函数。在创建模态表单的 HTML 模板中，我有一个选择元素，我想传递一个值。代码是这样的：

<script type="text/javascript">
    $("#assignButton").on("click",function(event) {
    myValue = $("#sfc").selectmenu("value")
});
</script>
<script type="text/ng-template" id="assignSFC.html">
    <div class="modal-header" style="fill: #f08a00">
        <h3>Assign SFC</h3>
    </div>
    <div class="modal-body">
        <fieldset>
            <label for="sfc">Select a Service Chain</label>
            <select name="sfc" id="sfc">
              <option selected="selected" value="0">No Chain</option>
              <option value="1">Service Chain 1</option>
              <option value="2">Service Chain 2</option>
            </select>
        </fieldset>
    <div class="modal-footer">
        <!-- <div class="alert alert-error" ng-model="error.msg">
            <a class="close" data-dismiss="alert">x</a>
            <strong>Error!</strong>This is a fatal error. {{error.msg}}
        </div> -->
        <button type="button" class="btn btn-warning" ng-click="cancel()">Cancel</button>
        <button type="button" id="assignButton" class="btn btn-primary" ng-click="ok(value)">Assign</button>
    </div>
</script>

在最后一个按钮中，如果我输入如下内容：ng-click="ok(2)"，它将完美地执行 assignSFC 函数。我的问题是我不知道如何根据表单中的选择传递这些值（0,1,2）。 你看到什么白痴了吗？

再次感谢！！

Answer 1

你做错了。 Angularjs 是两种方式绑定，您正在尝试将 jQuery 与 angularjs 混合。 Angularjs 有自己的功能来实现你想要的。您还没有使用控制器，并且您正在尝试使用 ng-click 来使用单击按钮。 试试下面的代码：

<script type="text/ng-template" id="assignSFC.html">
    <div ng-controller="TemplateController">
    <div class="modal-header" style="fill: #f08a00">
        <h3>Assign SFC</h3>
    </div>
    <div class="modal-body">
        <fieldset>
            <label for="sfc">Select a Service Chain</label>
            <select name="sfc" id="sfc" ng-model="data.sfcSelection">
              <option selected="selected" value="0">No Chain</option>
              <option value="1">Service Chain 1</option>
              <option value="2">Service Chain 2</option>
            </select>
        </fieldset>
    <div class="modal-footer">
        <!-- <div class="alert alert-error" ng-model="error.msg">
            <a class="close" data-dismiss="alert">x</a>
            <strong>Error!</strong>This is a fatal error. {{error.msg}}
        </div> -->
        <button type="button" class="btn btn-warning" ng-click="cancel()">Cancel</button>
        <button type="button" id="assignButton" class="btn btn-primary" ng-click="ok()">Assign</button>
    </div>
    </div>
</script>

这里是控制器：

angular.module('myApp', [])
  .controller('TemplateController', ['$scope', TemplateController]);

function TemplateController($scope) {
    $scope.data = {};
    $scope.data.sfcSelection = [];
    $scope.ok = ok;

    function ok() {
        console.log($scope.selectedValue);
    }
}