动态模板在 ng 重复上添加空值

我一直在尝试为自己的目的制作一个查询生成器。到目前为止，这个笨蛋 https://plnkr.co/edit/95VgJfH9nIScwApXyKOu?p=preview 有我的工作，

当我选择一个参数并单击添加时，它会在 JSON 中加起来，但不显示在模板的 ng-repeat 中。无法弄清楚为什么会发生这种情况.

我的简斯

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);
      });
    }
  };
}]);

我的网页

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

Sibi，

我运行了您的代码，并注意到您正在运行 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 进行上述修改时有效。

相关内容

最新更新

热门标签：