Question

我有一个使用angular来生成名称列表的输入，我希望每个名称都是一个链接，它以名称作为输入值提交表单。

<form method="POST" action="/results/" id="artform>
{% csrf_token %}
   Search:<input type="text" name="search" ng-model="search" />
          <input type="submit" value="Submit" /> 
</form>
<table ng-controller="mycontroller">
    <tr ng-repeat="artist in artists | filter:search | limitTo:10">
        <td ng-hide="!search">
            <a class="click-me" href="javascript:$('#artform').submit();">
                 {({ artist })}
            </a>
        </td>
    </tr>
</table>

<script>
  (function ($){
    $(function () {
        $('body').delegate('.click-me', 'click', function (){
            $('input[name="search"]').val({({ artist })});
        });
    });
})(jQuery);    
</script>

.val({({ artist })});是我想要注入{({ artist })}的任何值的地方，因为我希望链接提交名称为值的表单。如何将角度变量放入jquery？

Answer 1

试

$('body').delegate('.click-me', 'click', function (){
            var artist = $(this).text();
            $('input[name="search"]').val(artist);
 });

Answer 2

没有简单的方法来实现这一点。

但是，在您的情况下，您可以轻松使用：

$('input[name="search"]').val($(this).text());

Answer 3

您正在组合两种不兼容的技术。如果您选择仅在您的站点中使用AngularJS或仅使用JQuery，那会更好。

但是要在jquery中回答你的问题，如果你想让值成为锚中的文本：

 $('body').delegate('.click-me', 'click', function (){
            $('input[name="search"]').val($(this).text());
        });

或者，如果您想以Angular方式解决此问题，请执行以下操作：

在控制器（mycontroller）中创建一个名为clickMe的方法，并将锚的值绑定到搜索文本框。您必须在代码中移动控制器，以便搜索框和表格成为同一控制器的一部分。

<div ng-controller="mycontroller">
<form method="POST" action="/results/" submit-on="clickMeEvent">
{% csrf_token %}
   Search:<input type="text" name="search" ng-model="search" />
          <input type="submit" value="Submit" /> 
</form>
<table >
    <tr ng-repeat="artist in artists | filter:search | limitTo:10">
        <td ng-hide="!search">
            <a ng-click="clickMe(artist)">
                 {({ artist })}
            </a>
        </td>
    </tr>
</table>
</div>

控制器：

  $scope.clickMe = function (artist) {
     $scope.search = artist;
     $scope.$broadcast('clickMeEvent');
};

指令：

app.directive('submitOn', function() {
    return {
        link: function(scope, elm, attrs) {
            scope.$on(attrs.submitOn, function() {
                //We can't trigger submit immediately, or we get $digest already in progress error :-[ (because ng-submit does an $apply of its own)
                setTimeout(function() {
                    elm.trigger('submit');
                });
            });
        }
    };
});

如何在jQuery代码中使用角度变量

3 个答案: