如何将选定的“文本”选择框发送到按钮上的函数，以便使用角度进行 ng 单击

How can I send a SELECT box selected "text" to a function on a button for ng-click using angular?

本文关键字：函数 ng 单击 文本 选择 按钮      更新时间：2023-09-26

好的，我有一个包含选择元素的HTML页面。该选择元素将有三个选择(请参阅下面这些选择的$scope定义...：

<div id="mainID" ng-controller="theController">
    <form name="assetTypeForm" class="form-horizontal" role="form" novalidate> 
        <select id="assetTypeSelect" name="asset.assetTypeList" style="width: 135px;"
            ng-model="asset.assetTypeList" 
            ng-options="option.name for option in assetTypeListOptions track by option.value"
            ng-change="regularAssetTypeToggleClick(asset)"
            class="form-control" required>
            <!-- This is a HACK to trick Angular to make the first option value = 0 -->
            <option value="" style="display: none;">Choose Type</option>
        </select>
        <button type="button" 
                ng-click="createAsset({{asset.assetTypeList}});" //This is the value I'm trying to pass...
                class="btn btn-primary btn-small"> 
                Create Asset
        </button>
    </form>
</div>

接下来在我的控制器中，我从按钮调用了这个函数：

$scope.createAsset = function (assetType) { //As you can see with assetType (arg) I want to pass what the user selected in the dropdown select box.
        $scope.$broadcast('show-errors-check-validity');
        console.log("The asset I want to create is: " + assetType);
        if ($scope.assetTypeForm.$invalid) {
            console.log("BUMMER! The assetTypeForm is NOT valid: " + $scope.assetTypeForm.$invalid);
            $scope.submitted = false;
            return;
        } else {
            //Open the dialog for creating a graphic element
            $scope.openCreateElement(assetType);
        }
    };

我有资产类型的定义下拉列表：

    $scope.assetTypeListOptions = [
        {
            name: 'Choose Type...',
            value: 'choose'
        }, {
            name: 'EULA',
            value: 'eula'
        }, {
            name: 'GRAPHIC',
            value: 'graphic'
        }];
    //This sets the default for the list
    $scope.assetTypeList = $scope.assetTypeListOptions[0];

我在控制台中得到的是.log是这样的：

The asset I want to create is: [object Object] <-- Here, is where either EULA, Graphic or Choose Type... where Choose Type... will throw an alert to tell the user, via show-errors{} that they NEED to select either EULA or Graphic.

就是这样。。。。

谢谢

好的更新：作为评论的回应：

所以，你说的是;我可以将你在这里建议的内容传递到函数中：[[[ $scope.assetTypeListOptions[$scope.asset.assetTypeList].value ]]]到函数中："createAsset({{asset.assetTypeList}}(;"像这样？

按顺序： 

  ng-click="createAsset({{asset.assetTypeList}});"

您不需要在指令中使用{{}}：

  ng-click="createAsset(asset.assetTypeList);"

但是您甚至不需要传递它，因为您选择的模型始终可用

$scope.asset.assetTypeList

此外，您的初始化错误：

$scope.assetTypeList = $scope.assetTypeListOptions[0];

您使用 ng-model="asset.assetTypeList" ，因此您应该初始化：

$scope.asset.assetTypeList = $scope.assetTypeListOptions[0];

确保之前$scope.asset初始化过。

否则，请使用 ng-model="assetTypeList" .

您应该能够使用 ng-model 指令来应用数据绑定。

所以"><选择>"变成了

 <select ng-model="fieldName" >

然后，如果需要调用的函数位于控制器中，则可以使用 $scope.fieldName 获取 select 的值。

相关文章：