Angularjs如何防止在ng-repeat中排序答案

【问题标题】：Angularjs how to prevent ordering in ng-repeatAngularjs如何防止在ng-repeat中排序
【发布时间】：2018-03-21 12:33:29
【问题描述】：

我在 AngularJS ng-repeat 中使用 json 数组。我观察到它订购的输入覆盖了我在我的 html 中的内容。有什么办法可以防止这种排序发生吗？

这是我的代码（在Plunkr 中查看）：

<body ng-controller="Controller">
  <div ng-repeat="x in data">
    <input type="checkbox" ng-show="x.Project == 'ABC'" ng-model="x.Show"><b ng-show="x.Project == 'ABC'"> project ABC is wonderful</b>
    <input type="checkbox" ng-show="x.Project == 'DEF'" ng-model="x.Show"><b ng-show="x.Project == 'DEF'"> How is this EFG?</b>
    <input type="checkbox" ng-show="x.Project == 'IJK'" ng-model="x.Show"><b ng-show="x.Project == 'IJK'"> This is my IJK project</b>
  </div>
  <br> {{data}}
</body>

还有数据：

$scope.data = [{
    "Project": "IJK",
    "Show": "true"
  },
  {
    "Project": "DEF",
    "Show": "false"
  },
  {
    "Project": "ABC",
    "Show": "true"
  }
];

我找到了solution，但这是使用外部函数，但如果可能的话，我正在寻找更好的方法。

请提出建议。

【问题讨论】：

你为什么不在data 上创建一个ng-repeat 并使用其内容动态生成intputs，而不是在每次迭代中显示/隐藏它们中的三个（由方式，你知道你正在生成 9 个输入，并且只显示 3 个吗？）。这将以 json 的相同顺序显示值。

标签： angularjs angularjs-ng-repeat

【解决方案1】：

在data 上创建一个ng-repeat 并使用其内容动态生成intputs，而不是在每次迭代中显示/隐藏它们中的三个。这将以 JSON 的相同顺序显示值，如下所示：

<div ng-repeat="x in data">
    <input type="checkbox" ng-model="x.Show[$index]"><b>Project {{x.Project}} is Present</b>
</div>

请注意这里的模型是如何在对象x.Show 中动态创建的。该对象现在将为每个项目都有一个索引，并且在该索引中，属性将为true|false，具体取决于项目复选框的值。

查看工作中的Plunker

【讨论】：

是的，它的工作原理。但是，如果所有三个的文本都不相同怎么办。例如，ABC=>'项目ABC很棒'，EFG=>'这个EFG怎么样？'，IJK=>'这是我的IJK项目'。我想按（EFG，ABC，IJK）的顺序打印
在这种情况下，最好的选择是在 JSON data 中添加另外两个属性，指示项目名称和顺序，例如：$scope.data = [{ "Project": "IJK", "Show": "true", "Name" : "This is my IJK project", "order" : 3 }];（只有一个对象在此示例中，其他两个对象将遵循相同的模式）。 Whit this 你会显示这样的名字：{{x.Name}} 并像这样订购ng-repeat：ng-repeat="x in data | orderBy: 'order'"
@sand 如果您描述的是真实情况，请更新您的问题，以便我可以使用正确的代码更新答案。
嗨@lealceldeiro，我无法更改输入json。我也有更新问题和 plunkr。
@sand，我想知道，为什么不能更改 JSON 数据？如果它来自服务器或者您需要它来执行其他任务......但无论如何您想以这个特定的顺序显示它，请复制 JSON 并按照我在之前的评论中描述的那样对其进行转换。这不也是一种选择吗？无论如何，让我看看如何在这些条件下解决问题。

【解决方案2】：

你的问题一点都不清楚……

如果有更多项目到来，你的处理方式根本无法扩展，所以试着描述你的最终目标，而不是你现在的位置......

如果您只对了解这 3 个特定项目的信息感兴趣，而不管服务器返回多少，请将其转换为地图，然后查找：

  $scope.map = $scope.data.reduce(function(map, next) {
    map[next.Project] = next;
    return map;
  }, {});

  <div><input type="checkbox" ng-model="map['ABC'].Show"><b> project ABC is wonderful</b></div>
  <div><input type="checkbox" ng-model="map['DEF'].Show"><b> How is this EFG?</b></div>
  <div><input type="checkbox" ng-model="map['IJK'].Show"><b> This is my IJK project</b></div>

如果列表是动态的（您可以显示任意数量的项目）...排序！...

  <div ng-repeat="x in data | orderBy:'Project'">
    <input type="checkbox" ng-model="x.Show"><b> Bla {{x.Project}} bla</b>
  </div>

如果您需要更多控制，也可以在代码中：

  var sorted = $scope.data.slice(0);
  sorted.sort(function(left, right) {
    var l = left.Project.toUpperCase(); // ignore upper and lowercase
    var r = right.Project.toUpperCase(); // ignore upper and lowercase
    if (l < r) {
      return -1;
    }
    if (l > r) {
      return 1;
    }

    // names must be equal
    return 0;
  });
  $scope.sorted = sorted;

  <div ng-repeat="x in sorted">
    <input type="checkbox" ng-model="x.Show"><b> Bla {{x.Project}} bla</b>
  </div>

最后，如果您想更改 pr 上的文本。在这种情况下，项目库，要么需要另一个查找：

  $scope.text = {
    ABC: "project ABC is wonderful",
    DEF: "How is this EFG?",
    IJK: "This is my IJK project",
  }

  <div ng-repeat="x in ...">
    <input type="checkbox" ng-model="x.Show"><b> {{text[x.Project]}}</b>
  </div>

或丰富模型：

  $scope.enriched = sorted.map(function(item){
    item.text = textmap[item.Project];
    return item;
  })

  <div ng-repeat="x in enriched">
    <input type="checkbox" ng-model="x.Show"><b> {{x.text}}</b>
  </div>

但我不知道您在寻找哪种解决方案？

https://plnkr.co/edit/ZTKe9QMWnEiSiCXUb9Gz?p=preview

我还应该注意，我将“显示”属性转换为布尔值而不是文本，因为看起来你不想将复选框绑定到它我假设你想要那个...

如果输入的 json 带有文本，您可以使用 ng-true-value/ng-false-value，请参阅文档：https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

或映射值。

只用布尔值更容易解释示例，所以不要这样保留。

【讨论】：

同意你的看法。这里只有一件事需要注意：在列表是动态的解决方案中，此代码<input type="checkbox" ng-model="x.Show"><b> Bla {{x.Project}} bla</b> 应该是<input type="checkbox" ng-model="x.Show[someIndexHere]"><b> Bla {{x.Project}} bla</b>，以便正确绑定每个项目的模型。注意someIndexHere 部分。
考虑到他在问题中所做的事情，我假设他希望检查复选框是否显示为真，如果为假则不厚脸皮......（考虑到他绑定它们的方式）这是他们的方式我提供的样本工作......但是再次......这个问题在最终目标上并不明确......如果我们按照你所说的那样绑定，它将索引到一个值为真/假的字符串，不知道这会给我们带来什么......
@Jens，我很遗憾没有以正确的方式传达需求。我想要的是，显示顺序应该是我为 " type" 给出的顺序，而不是 angular 在内部所做的。无论如何，“$scope.map =”方法正是我想要的，我将它用于我的项目。非常感谢