在 ng-click 中将数据传递给模型

Posted 2023-02-19

【中文标题】在 ng-click 中将数据传递给模型

【英文标题】：Passing data to model inside the ng-click

【发布时间】：2016-09-22 09:52:31

【问题描述】：

我正在显示数据库中的所有文章，并为它创建了一个简单的文本搜索。

<input ng-model="searchText" placeholder="Search for articles" class="search-text">

我正在从 searchText 中过滤内容

<section class="articles" ng-repeat="contentItem in content | filter:searchText">

现在我正在尝试使用来自我的数据库的类别和标签的按钮，并能够根据按钮值过滤内容。

<span ng-repeat="category in categories">
  <button ng-click="searchText = 'category.local.name'" class="btn btn-primary"> category.local.name </button>
</span>

上面的代码不起作用，但例如，如果我取出 ng-repeat 并自己键入所有类别，它将起作用：

<span>
  <button ng-click="searchText = 'some text'" class="btn btn-primary">Some text</button>
</span>

我的问题是如何将内容从搜索输入和按钮传递给过滤方法的好方法？

这里是完整的代码：

<div class="container">
 <h1>List of articles</h1>
<section class="search-items">
<input ng-model="searchText" placeholder="Search for articles" class="search-text">
<div class="row">
  <div class="col-sm-6">
    <h6>Search based on categories:</h6>
    <span ng-repeat="category in categories">
      <input type="button" ng-click="searchText = ' category.local.name '" value=" category.local.name " class="btn btn-primary">
    </span>
  </div>
  <div class="col-sm-6">
    <h6>Search based on tags:</h6>
    <span ng-repeat="tag in tags">
      <input type="button" ng-click="searchText = 'tag.local.name'" value=" tag.local.name " class="btn btn-primary">
    </span>
  </div>
</div>
</section>
<section class="articles" ng-repeat="contentItem in content | filter:searchText">
  <article class="well">
    <h3> contentItem.local.title </h3>
    <p> contentItem.local.content </p>
    <span><b>Article author:  contentItem.local.author </b></span><br/>
    <span class="label label-primary"> contentItem.local.categories.category </span>
    <span class="label label-primary"> contentItem.local.tags.tag </span>
  </article>
 </section>
</div>

【问题讨论】：

不清楚要问什么。您说“我可以看到，如果我删除 ng-repeat 并自己输入一些文本，它将起作用”您能否详细说明一下。关于 ng-click，它需要一个 angular expression docs.angularjs.org/guide/expression ，它是针对范围解析的，因此不需要其中的 插值大括号。

我已经编辑了这个问题，我希望我现在更精确。感谢您尝试提供帮助！ - 我也试过没有 但据我所知，我无法在 ng-repeat 内传递变量。

您可以只使用ng-click="searchText = tag.local.name"，那么如果您在视图中有<pre>searchText|json</pre>，您应该会看到searchText 使用tag.local.name 的值进行更新，并针对重复元素的范围进行解析.我将尝试做一个最小的示例答案。

也感谢您解决问题。修改后更容易阅读。

【参考方案1】：

angular.module('myApp', [])
.controller('ThingsController', function()
  var ctrl = this;
  ctrl.things = ['thing 1', 'thing 2', 'another thing']
  ctrl.searchText = "something"
)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ThingsController as thingCtrl">
<div ng-repeat="thing in thingCtrl.things">
  <button ng-click="thingCtrl.searchText = thing">thing</button>
</div>

<pre>thingCtrl.searchText

上面的 sn-p 显示它也使用控制器作为语法工作。通常，您不想使用 $scope，就好像它是您希望它指向您的模型的模型一样，否则您可能会遇到一些奇怪的原型继承问题。如在$scope.myModel = someProp:4 而不是$scope.someProp = 4 中使用控制器作为语法也可以避免这个问题。

What are the nuances of scope prototypal / prototypical inheritance in AngularJS?