如何将选择“文本”的SELECT框发送到按钮上的功能以使用角度进行ng-click?

时间:2022-05-12 19:42:40

OK, I have this HTML page which contains a select element. That select element will have three choices (see the $scope definition below of those choices...:

好的,我有这个包含select元素的HTML页面。那个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>

Next in my controller, I have this function called from the button:

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

$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);

        }

    };

I have the definition of the assetType drop down:

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

What I get in the console.log is this:

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

That's it....

Thanks

OK UPDATE: In response the comment:

OK UPDATE:回复评论:

So, what you're saying is; I can pass what you suggested HERE: [[[ $scope.assetTypeListOptions[$scope.asset.assetTypeList].value ]]] into the function: "createAsset({{asset.assetTypeList}});" like this?

所以,你所说的是;我可以将你在这里建议的内容:[[[scope.assetTypeListOptions [$ scope.asset.assetTypeList] .value]]]传递给函数:“createAsset({{asset.assetTypeList}});”喜欢这个?

2 个解决方案

#1


2  

By order:

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

You don't need to use {{}} in your directives:

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

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

But you don't even need to pass it, because your select model always available as

但你甚至不需要传递它,因为你的选择模型总是可用的

$scope.asset.assetTypeList

Also you have wrong initialization:

你的初始化错误:

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

You use ng-model="asset.assetTypeList", so you should initialize:

你使用ng-model =“asset.assetTypeList”,所以你应该初始化:

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

Be sure that $scope.asset initialized before.

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

Or otherwise, use ng-model="assetTypeList".

或者,使用ng-model =“assetTypeList”。

#2


0  

You should be able to use the ng-model directive to apply the data binding.

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

So the "< select>" became

所以“

 <select ng-model="fieldName" >

Then if the function that you need to call is in your controller, you can use $scope.fieldName to get the value of select.

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

#1


2  

By order:

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

You don't need to use {{}} in your directives:

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

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

But you don't even need to pass it, because your select model always available as

但你甚至不需要传递它,因为你的选择模型总是可用的

$scope.asset.assetTypeList

Also you have wrong initialization:

你的初始化错误:

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

You use ng-model="asset.assetTypeList", so you should initialize:

你使用ng-model =“asset.assetTypeList”,所以你应该初始化:

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

Be sure that $scope.asset initialized before.

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

Or otherwise, use ng-model="assetTypeList".

或者,使用ng-model =“assetTypeList”。

#2


0  

You should be able to use the ng-model directive to apply the data binding.

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

So the "< select>" became

所以“

 <select ng-model="fieldName" >

Then if the function that you need to call is in your controller, you can use $scope.fieldName to get the value of select.

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