如何在Angular ng-if上的Ruby中做出諸如“ include？”方法的條件語句

Question

對不起，我很難使標題更清晰。 我會盡力解釋。

我將Rails用作后端（API），並將AngularJS用作前端。

我從articleCtrl獲得了一些喜歡（豎起大拇指）的article_id，名為$ scope.article_has_liked（它是一個包含幾個article_id的數組，例如[24,45,55]），如下所示：

articleCtrl.js.coffee

$http.get(url).success((data)->
console.log(data)
$scope.articles = data.articles
$scope.topic = data.topic
$scope.article_has_liked = data.article_has_liked
)

然后將這些article_ids（$ scope.article_has_liked）傳遞給show.html，以便使用“ ng-if”進行判斷，如下所示：

Show.html

<div ng-if="article_has_liked.include?(article.id)">
    <button class="btn btn-link" ng-click="likeItOrNot(article.id, topic.id)">
    <span class="glyphicon glyphicon-star"></span>
    </button>
</div>
<div ng-if="article_has_liked.exclude?(article.id)">
    <button class="btn btn-link" ng-click="likeItOrNot(article.id, topic.id)">
    <span class="glyphicon glyphicon-star-empty"></span>
    </button>
</div>

問題來了！

我想使用.include嗎？ Ruby中的method，以確定是否喜歡的article_ids包含了article.id 。 如果喜歡的話，我給它加個實心星星。 但是我發現Angular似乎不接受用法，它返回了如下錯誤：

Error: Syntax Error: Token 'undefined' expected : at column NaN of the expression [article_has_liked.include?(article.id)] starting at [article_has_liked.include?(article.id)].
throwError@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:6672:1
ternary@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:6827:9
_assignment@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:6800:16
expression@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:6796:12
_filterChain@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:6762:16
statements@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:6742:25
parser@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:6661:13
$ParseProvider/this.$get</<@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:7282:1
compileToFn@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:9215:16
$RootScopeProvider/this.$get</Scope.prototype.$watch@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:8547:19
ngIfDirective</<.compile/<@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:14677:9
nodeLinkFn@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:4960:13
compositeLinkFn@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:4539:15
compositeLinkFn@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:4554:13
compositeLinkFn@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:4554:13
compositeLinkFn@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:4554:13
compositeLinkFn@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:4554:13
compositeLinkFn@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:4554:13
publicLinkFn@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:4456:30
ngRepeatAction@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:15463:15
$watchCollectionAction@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:8718:11
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:8812:21
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:9013:13
done@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:10266:34
completeRequest@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:10450:7
createHttpBackend/</xhr.onreadystatechange@http://localhost:3000/assets/angular.self-cdfe10db265380c82ec938d307fce2720dc9fb9d8cfa21c78928031af124e282.js?body=1:10405:1
 <!-- ngIf: article_has_liked.include?(article.id) -->

所以我想問是否有任何條件語句與.include具有相似的含義？ 可以在AngularJS的“ ng-if”中使用，還是有更好的方法進行判斷？

感謝大家幫助我解決這個令人困惑的問題！

Answer 1

ng-if="article_has_liked.include?(article.id)"

更新為此：

ng-if="article_has_liked.include?(article.id):false value here"

Answer 2

那是一個與JavaScript有關的問題，而不是AngularJS。 但這可以回答您的問題：

通常，您將需要檢查數組是否包含某個項目。 您可以使用indexOf()方法來執行此操作。 如果代碼未在列表中找到該項目，則返回-1 。

var article_has_liked = [24,45,55];
if(article_has_liked.indexOf(99) == -1){
 alert("data not found");
}

不確定，但是您可以嘗試以下方法：

<div ng-if="article_has_liked.indexOf(article.id) != -1"> 

注意：以上條件是檢查是否包含。 如果它在article_has_liked中包含您的article.id，則僅執行該塊。 如果要檢查exclude則可以簡單地使用==代替!=我希望它對您有用。