Question

我一直在努力为自己的目的创建一个查询构建器。到目前为止，这个标题https://plnkr.co/edit/95VgJfH9nIScwApXyKOu?p=preview有我的工作，

当我选择一个参数并点击添加时，它会在JSON中累加，但不会显示在模板中的ng-repeat中。无法弄清楚为什么会这样。

我的JS

var app = angular.module('testApp', []);
app.controller('MainController', ['$scope', function($scope) {
  $scope.rules = {
    name: "",
    service: "",
    identifier: "",
    operator: "",
    parameter: [],
    operatorGlobal: "and",
    value: ""
  }

  $scope.data = {
    Region: ["region2", "region1", "region3"],
    VolumeId: ["V001", "V003"]
  }

  for (var i in $scope.data) {
    $scope.rules.parameter = Object.keys($scope.data);
  }

  $scope.out = {
    parameter: ""
  }

  $scope.output = [];

  $scope.addCondition = function() {
    $scope.outputData = {
      type: $scope.out.parameter,
      operator: "",
      value: "",
      operatorGlobal: ""
    }
    $scope.output.push($scope.outputData)

    $scope.removeCondition = function(index) {
      $scope.output.splice(index, 1);
      console.log($scope.output.outputData)
    }
  }
}]);
app.directive('newQuery', ['$compile', '$templateRequest', function($compile, $templateRequest) {
  return {
    controller: 'MainController',
    replace: false,
    scope: false,
    transclude: false,
    link: function(scope, element, attrs) {
      var template;

      $templateRequest("query.html").then(function(html) {
        template = angular.element(html);
        element.append(template);
        $compile(template)(scope);
      });
    }
  };

}]);

我的HTML

 <!DOCTYPE html>
<html ng-app="testApp">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body style="padding:0 25px" ng-controller="MainController">
  <div class="row">
    <!-- Parameter -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="selectbasic">Parameter</label>
      <select id="selectbasic" name="selectbasic" class="form-control" ng-model="out.parameter">
        <option value="" selected="">Select identifier</option>
        <option ng-repeat="vals in rules.parameter" value="{{vals}}">{{vals}}</option>
      </select>
    </div>
    <!-- Operator -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="selectbasic">Operator</label>
      <select id="selectbasic" name="selectbasic" class="form-control" ng-model="rules.operator">
        <option value="" selected="">Option one</option>
        <option value={{operator}} ng-repeat="operator in operators">{{operator}}</option>
      </select>
    </div>
    <!-- Value -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="selectbasic">Value</label>
      <input type="text" class="form-control" placeholder="value" ng-model="rules.value">
    </div>
    <!-- Operator -->
    <div class="form-group radios">
      <label class="radio-inline" for="radios-0">
        <input type="radio" name="radios" id="radios-0" value="and" ng-model="rules.operatorGlobal"> AND
      </label>
      <label class="radio-inline" for="radios-1">
        <input type="radio" name="radios" id="radios-1" value="or" ng-model="rules.operatorGlobal"> OR
      </label>
      <button class="btn btn-emarald-transparent btn-sm pull-right" ng-click="addCondition()">Add </button>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-sm-6 col-lg-6">
      <h4>Condition</h4>
      <hr/>
      <div ng-repeat="data in output track by $index" class="row condition text-center" new-query=""></div>
    </div>
    <div class="col-md-6 col-sm-6 col-lg-6" style="margin-top: 10px">
      <pre>{{output | json:4}}</pre>
    </div>
  </div>
  <script type="text/ng-template" id="query.html">
    <span>{{data.type}}</span>
    <span>{{data.operator}}</span>
    <span>{{data.value}}</span>
    <i class="fa fa-minus-circle text-permission pointer" ng-click="removeCondition($index)">{{$index}}</i>
  </script>
</body>

</html>

Answer 1

思碧，

我运行了你的代码并注意到在你运行ng-repeat的div中没有输出绑定。如果你没有绑定，那么什么都不会输出。

更改此行：

<div ng-repeat="data in output track by $index" class="row condition text-center" new-query=""></div>

到此：

<div ng-repeat="data in output track by $index" class="row condition text-center" new-query="">{{data}}</div>

这将按预期在视图中显示JSON数据输出。

如果您的问题与该问题无关，那么您可以尝试在数组更新后运行$ scope.apply（）以强制angular重新检查数组并更新输出，但我认为这是正确更新，因为当我对你的plunkr进行上述修改时它会起作用。

动态模板在ng-repeat上添加空值

1 个答案: