我怎样才能在 Angular ng-if Ruby 中做出类似 "include?" 方法的条件语句

Question

抱歉，我很难让标题更清楚。我会尽量解释的。

我使用Rails作为后端（API），AngularJS作为前端。

我从 articleCtrl 中得到了几个被点赞（点赞）的 article_ids，名为 $scope.article_has_liked（它是一个包含多个 article_ids 的数组，例如 [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>

问题来了！

我想在 Ruby 中使用 .include? 方法来确定 article.id被点赞的article_ids收录。如果喜欢，我会给它一颗实心星。但是我发现 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() 方法执行此操作。如果代码未在列表中找到该项目，则它 returns a -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 那么你可以简单地使用 == 而不是 != 我希望它对你有用。

我怎样才能在 Angular ng-if Ruby 中做出类似 "include?" 方法的条件语句

How can I make a conditional statement like "include?" method in Ruby on Angular ng-if

ruby

ruby-on-rails

include

angularjs

angular-ng-if