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，以便使用＆＃34; ng-if＆＃34;进行判断，如下所示：

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

所以我想问一下是否有任何条件语句与 .include？具有相似的含义，我可以在AngularJS＆＃34; ng-if＆＃34;中使用，或者有任何条件语句让我做出判断的更好方法是什么？

感谢大家帮助我解决这个令人困惑的问题！

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，那么您只需使用==代替!=我希望它适合您。

如何制作条件语句，例如＆＃34; include？＆＃34; Ruby on Angular ng-if

2 个答案: