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

Question

我在 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>

和 ata:

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

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

请推荐。

Answer 1

在 data 上创建一个 ng-repeat 并使用其内容在每次迭代中动态生成 intput 而不是 showing/hiding 这三个。这将按照 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

Answer 2

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

如果有更多的项目到来，您的方法将完全不同，因此请尝试描述您的最终目标，而不是您现在的位置...

如果您只对这 3 个特定项目感兴趣，而不管服务器有多少 returns，请将其转换为地图，然后进行查找：

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

最后，如果您想更改公关上的文字。在这种情况下，项目基础需要再次查找：

  $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

我还应该注意，我将 "Show" 属性转换为布尔值而不是文本，因为看起来您不想将复选框绑定到它我假设您想要...

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

或映射值。

仅用布尔值更容易解释示例，所以我将保留它们。

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

Angularjs how to prevent ordering in ng-repeat

angularjs

angularjs-ng-repeat