javascript - Angular ng-show 不连续检查条件？

Question

我有一个 ng-repeat 指令，我在其中显示所有对象(想法)。如果想法描述(字符串)比 x 长，我只想显示前 x 个字符和“显示全部”链接。用户可以点击这个链接，全文就会显示出来。但是一次只能显示一个想法及其整个文本。

我现在有这个:

div(ng-show = "idea.description.length > maxIdeaDescLength && openLongIdea != idea._id")
  i {{idea.description.substring(0, maxIdeaDescLength) }} ...
  a(href='', ng-click='openLongIdea = idea._id') show all
div(ng-show = "idea.description.length <= maxIdeaDescLength || openLongIdea == idea._id")
  i {{idea.description}}

这是我的 Controller 的一部分:

$scope.openLongIdea = 0;

所以当我点击显示所有链接时，ideaID 将被保存到变量 openLongIdea 中。由于我的 ng-show 条件，我希望仅当 idea-ID 与 openLongIdea-ID 匹配时才显示整个描述。但我仍然一次看到不止一个想法，它们的描述很长。

第一次展示想法时，我的逻辑就起作用了。当我单击显示所有链接时，将显示较长的文本。但是当我点击另一个想法的查看所有链接时，它也会在旧想法旁边作为一个整体显示，尽管我用新的想法ID覆盖了openLongIdea中的值。

这里有什么问题？

Answer 1

正如评论中所指出的，它看起来像是绑定(bind)到原语的问题。在 JavaScript 中，基元( bool 值、数字、字符串)是不可变的，因此当您更改一个时，例如您的数字 maxIdeaDescLength，先前的实例将被丢弃并使用一个新实例。这打破了 Angular 的双向绑定(bind)，并且 maxIdeaDescLength 的任何其他用法都不会更新为新值。

您可以通过使 openLongIdea 成为 $scope 对象的属性来解决这个问题，例如$scope.data.openLongIdea。在这种情况下，即使 maxIdeaDescLength 发生变化，$scope 也有对 data 的引用，因此 maxIdeaDescLength 的更新值可以访问。

但是，请考虑切换到 controllerAs View 语法。来自 John Papa's style guide ，除其他论点外:

It promotes the use of binding to a "dotted" object in the View (e.g. customer.name instead of name), which is more contextual, easier to read, and avoids any reference issues that may occur without "dotting".

更新 Controller :

var app = angular.module("app", []);
app.controller('ctrl', function () {
  var vm = this;
  vm.maxIdeaDescLength = 10;
  vm.ideas = [
    {_id : 0, description :'abcd efgh ijkl'},
    {_id : 1, description :'qwer tyui opzx'}
  ];
});

示例 View :

<div ng-app="app" ng-controller="ctrl as vm">
  <div ng-repeat="idea in vm.ideas">
    <div ng-show = "idea.description.length > vm.maxIdeaDescLength && vm.openLongIdea !== idea._id">
      {{idea.description.substring(0, vm.maxIdeaDescLength) }} 
      <a href='' ng-click='vm.openLongIdea = idea._id'> show all </a>
    </div>
    <div ng-show = "idea.description.length <= vm.maxIdeaDescLength || vm.openLongIdea === idea._id">
      {{idea.description}}
    </div>
  </div>
</div>

JsFiddle