簡體   English   中英

如何將選擇為“文本”的SELECT框發送到按鈕上的函數,以便使用angular進行ng-click?

[英]How can I send a SELECT box selected “text” to a function on a button for ng-click using angular?

好的,我有這個HTML頁面,其中包含一個select元素。 該select元素將具有三個選擇(請參閱下面這些選擇的$ 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);

        }

    };

我有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];

我在console.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.

而已....

謝謝

OK更新:作為回應,評論:

所以,你的意思是 我可以將您建議的內容傳遞給函數:[[[$ 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之前$scope.asset初始化。

否則,請使用ng-model="assetTypeList"

您應該能夠使用ng-model指令來應用數據綁定。

因此,“ <選擇>”成為

 <select ng-model="fieldName" >

然后,如果需要調用的函數在控制器中,則可以使用$ scope.fieldName獲取select的值。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM