[英]How can I send a SELECT box selected “text” to a function on a button for ng-click using angular?
OK, I have this HTML page which contains a select element. 好的,我有这个HTML页面,其中包含一个select元素。 That select element will have three choices (see the $scope definition below of those choices...:
该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更新:作为回应,评论:
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}});"
我可以将您建议的内容传递给函数:[[[$ scope.assetTypeListOptions [$ scope.asset.assetTypeList] .value]]]到函数中:“ createAsset({{asset.assetTypeList}});” like this?
像这样?
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
之前$scope.asset
初始化。
Or otherwise, use ng-model="assetTypeList"
. 否则,请使用
ng-model="assetTypeList"
。
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的值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.