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

【问题标题】：Passing data to model inside the ng-click在 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 的值进行更新，并针对重复元素的范围进行解析.我将尝试做一个最小的示例答案。
也感谢您解决问题。修改后更容易阅读。

标签： javascript angularjs angularjs-ng-repeat ng-repeat angularjs-ng-click

【解决方案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?

【讨论】：