javascript - 如何将隐藏表单元素值设置为单击元素的数据属性值

Question

我想使用 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 的主页展示了如何做几乎相反的事情(将元素属性绑定(bind)到表单字段)，但我无法完全弄清楚如何以相反的方式做到这一点。

Answer 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" />

在 Controller 中(确保它适用于 <ul> 和 <input> ):

$scope.form = {
    val: null // OR ANY OTHER INITIAL VALUE
};