你如何改变一个元素的 ng-model 属性（并让它工作）？答案

【问题标题】：How do you change the ng-model attribute of an element (and have it work)?你如何改变一个元素的 ng-model 属性（并让它工作）？
【发布时间】：2013-07-28 02:46:11
【问题描述】：

我有一个 ng-model 属性设置为“search.name”的输入

HTML

Search: 
<span id="searchName"> titles </span> | <span id="searchSpecies"> species </span>:

<input type="text" data-ng-model="search.name" />

如何在单击另一个元素（如链接或按钮）时更改此属性，并让我的过滤器使用更新后的属性？现在即使我更新了属性，过滤器就像它没有更新一样。

这是我更新属性的方式：

脚本

$("#searchName").click(function() {
     $("input").attr("data-ng-model", "recipesearch.name");
});
$("#searchSpecies").click(function() {
         $("input").attr("data-ng-model", "recipesearch.species");
});

有没有更好的方法可以通过指令来做到这一点？

【问题讨论】：

Angular 必须编译您的 html 并在您的所有绑定上创建监视。如果要更改绑定表达式，则需要再次编译 html 元素以更新绑定。我不确定该怎么做。

标签： jquery angularjs angularjs-directive angularjs-module jqlite

【解决方案1】：

将您的代码包装在$(document).ready() 中，如下所示

并确保您已添加到 jQuery 库的链接

Demo

$(document).ready(function () {
    $("#searchName").click(function () {
        $("input").attr("data-ng-model", "recipesearch.name");
    });
    $("#searchSpecies").click(function () {
        $("input").attr("data-ng-model", "recipesearch.species");
    });
});

【讨论】：

啊，好吧。这确实改变了属性。但是，即使属性已更改，angular 仍将属性字段视为最初放置的属性recipesearch.name。随后它对我的角度过滤器没有影响。

【解决方案2】：

你可能想看看$setViewValue

"这个方法应该在 DOM 事件处理程序中调用。对于示例输入或选择指令调用它。

它在内部调用所有解析器，如果结果值有效，更新模型并调用所有已注册的更改侦听器。”

【讨论】：

【解决方案3】：

如果我对问题的理解正确，您有一个表单，其中根据输入框中输入的内容过滤数据。但是您也有其他可以自动更改搜索的链接，可能是“常用搜索值”列表。

Fiddle 中概述了我要做的事情。

基本上我建议在您的链接或按钮上使用 ng-click 来更新正在搜索的值。

例子：

标记

 <a href="#" ng-click="changeSearchTo('Cat')">Cat</a>

控制器

 $scope.changeSearchTo = function (searchCriteria) {
     $scope.search = {
         name: searchCriteria
     };
 };

如果我不理解您的问题，我深表歉意。

-萨德

【讨论】：

泰德，不用道歉！我感谢您的帮助。不幸的是，这并不是我的想法。此解决方案更改了输入框中输入的值，但我想更改 HTML 中 ng-model 的值。例如，将ng-model="search.name" 更改为ng-model="search.ingredients"。所以search.name 更改为search.ingredients。我能够使用 jQuery 进行此属性更改，但它仍然表现得好像值是 search.name。我认为这与@Chandermani 上面所说的重新编译有关..
啊...现在明白了。谢谢。 :)