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

Question

I would like to set the data attribute value of a clicked html element as the value of a hidden form field, using angularJS.

I have a series of thumbnails to represent options in a form, and clicking one sets the value of a hidden form field to its data-val="something" value, essentially replicating the functionality of a select box.

In Jquery i can do it like this:

<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="">

However i would like to do the same with angularJS, as it provides some other very usefull functionality.

The HomePage of AngularJS shows how to do pretty much the oposite (bind an element attribute to a form field), but i cant quite work out how to do it the other way around.

Answer 1

Try something lke:

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

And in the controller (make sure it applies to both the <ul> and the <input> ):

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

Answer 2

Try this:

In 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">

In Controller:

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

}

See DEMO