个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 05:13:42 24 4
gpt4 key购买 nike

我一直在尝试为自己的目的创建一个查询生成器。这个笨蛋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>

最佳答案

西比，

我运行了你的代码，注意到你运行 ng-repeat 的 div 内没有输出绑定(bind)。如果你那里没有绑定(bind)，则不会输出任何内容。

更改此行:

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

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

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

关于javascript - 动态模板在 ng-repeat 上添加空值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41696336/

24 4 0
文章推荐： Javascript map 不是试图读取数据的函数
文章推荐： android - 错误夸大设计支持库中的任何内容
文章推荐： android - Android内部版本号
文章推荐： javascript - Angular DOM 修改时机
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com