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的主页显示了如何做相当多的oposite（将一个元素属性绑定到一个表单字段），但我不知道如何以相反的方式做到这一点。

Answer 1

尝试一下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" />

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

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

Answer 2

试试这个：

在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

}

请参阅DEMO

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

2 个答案: