將數據傳遞給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模型

回答

相關問題