0

如果我有一个数据库对象，它是通过我的 Angular 应用程序中的 JSON 加载的，我将使用如下结构：

数据

{
  "colours": ["red","yellow","pink","green","purple","orange","blue"]
}

控制器

angular.module('MyApp').controller('Page_controller',function($scope,$http) {
  $scope.addColour = function(e) {
    $scope.data.colours.push('')
  };

  $scope.removeColour = function(e) {
    var colour_index = $scope.data.colours.indexOf(the_colour_name);
    $scope.data.colours.splice(colour_index,1);
  }

  $http.json("/database/query.json").success(function(data) {
    $scope.data = data;
  })
})

/views/display.html

<div>
  <ul>
    <ng-include="'/templates/colour.html'" ng-repeat="colour in data.colours"></ng-include>
    <li><a href="" ng-click="addColour()" required>Add a colour</a></li>
  </ul>
  <div id="correct">CORRECT</div>
</div>

/模板/颜色.html

<li><input type="text" ng-model="colour" placeholder="Name of colour"></input> <a href="" ng-click="removeColour(some_way_to_refer_to_this_colour)">X</a></li>

现在我可以将颜色添加到列表中并删除它们。（是的，删除它们在上面有点夸张，我想你们都可以看到我想要做的事情！）

#correct我的问题是：只有当颜色是最初加载的颜色时，我才能让div 显示？

4

1 回答 1

1

将您的颜色数组复制到其他范围变量，例如$scope.originalColours.

将 ng-show 添加到您的 HTML 中：

<div ng-show="showCorrect">CORRECT</div>

将手表添加到您的控制器：

$watch('data.colours', function() {
    if($scope.data.colours.length === $scope.originalColours.length) {
        // Compare arrays $scope.data.colours and $scope.originalColours.
        // If the two arrays are the same, set $scope.showCorrect
        // to true and return.
    }
    $scope.showCorrect= false;
}, true);
于 2013-04-19T15:31:54.373 回答