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 の HomePage は、ほぼ反対の方法 (要素属性をフォーム フィールドにバインドする方法) を示していますが、その逆の方法はまったくわかりません。

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 に答える