0

我想使用 angularJS 将单击的 html 元素的数据属性值设置为隐藏表单字段的值。

我有一系列缩略图来表示表单中的选项，单击一个会将隐藏表单字段的值设置为其 data-val="something" 值，基本上复制了选择框的功能。

在 Jquery 我可以这样做：

<script type="text/javascript">
    $(function(){
        $('#fakeselect li a').click(function(){
            event.preventDefault();
            var val = $(this).data('val');
            $('#hiddeninput').val(val);
        });
    });
</script>

<ul id="fakeselect">
        <li><a href="#" data-val=1><img....></a></li>
        <li><a href="#" data-val=2><img....></a></li>
        <li><a href="#" data-val=3><img....></a></li>
</ul>

<input type="text" name="hidden" id="hiddeninput" value="">

但是我想对 angularJS 做同样的事情，因为它提供了一些其他非常有用的功能。

AngularJS 的主页显示了如何做几乎相反的事情（将元素属性绑定到表单字段），但我不能完全弄清楚如何做相反的事情。

4

2 回答 2

1

尝试一下：

<ul id="fakeselect">
    <li><a ng-click="form.val=1"><img....></a></li>
    <li><a ng-click="form.val=2"><img....></a></li>
    ...
</ul>

<input type="text" name="hidden" id="hiddeninput" ng-model="form.val" />

在控制器中（确保它同时适用于<ul>和<input>）：

$scope.form = {
    val: null // OR ANY OTHER INITIAL VALUE
};
于 2013-09-27T15:46:33.973 回答
1

尝试这个：

在 HTML 中：

<ul id="fakeselect">
    <li><a href="javascript:void(null);" ng-click="setValue(1)" ><img....></a></li>
    <li><a href="javascript:void(null);" ng-click="setValue(2)"><img....></a></li>
    <li><a href="javascript:void(null);" ng-click="setValue(3)"><img....></a></li>
</ul>

<input type="text" name="hidden" id="hiddeninput" value="" ng-model="hiddeninput">

在控制器中：

$scope.hiddeninput = '';
$scope.setValue = function(id) {
   $scope.hiddeninput = id;   
   //other stuff do here

}

见演示

于 2013-09-27T15:48:54.210 回答