将数据传递给ng-click模型

我正在显示数据库中的所有文章，并且已经为它创建了一个简单的文本搜索。将数据传递给ng-click模型

<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-重复和键入所有类别自己这将工作：

<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>

来源

2016-05-25 NinetyHH

不清楚被问到的是什么。你说：“我可以看到，如果我删除ng-repeat并自己输入一些文本，它将起作用”，你能否详细说明这一点。关于ng-click，它需要一个针对范围解析的“角度表达式”https://docs.angularjs.org/guide/expression，因此不需要{{}}插值。 – shaunhusain

我编辑了这个问题，我希望我现在更加精确。感谢您试图帮助！ - 另外我也尝试过{{}}，但据我所见，我无法在ng-repeat中传递变量。 – NinetyHH

你可以使用'ng-click =“searchText = tag.local.name”'，那么如果你在视图中有'

{{searchText|json}}

'，你应该看到searchText被更新为tag.local.name的值，重复元素的范围。我会尽量做一个最小样本答案。 – shaunhusain

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}}

上面的代码中显示它也正在使用控制器的语法。通常情况下，您不希望使用$ scope，就好像它是您希望它指向您的模型的模型，否则您可能遇到一些奇怪的原型继承问题。如$scope.myModel = {someProp:4}而不是$scope.someProp = 4使用控制器作为语法也避免了这个问题。

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

来源

2016-05-25 01:53:48 shaunhusain

将数据传递给ng-click模型

回答

相关问题