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

ng-repeat超过data并使用其内容动态生成intput，而不是在每次迭代中显示/隐藏其中的三个。这将以与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个特定项目的信息感兴趣，无论服务器返回多少，请将其转换为地图，然后再查找：

  $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

或映射值。

样本更易于解释只是布尔，所以生病就是这样。

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

2 个答案: