динамический шаблон добавляет пустое значение на ng-repeat

Я пытаюсь создать построитель запросов для своей собственной цели. Это plunker https://plnkr.co/edit/95VgJfH9nIScwApXyKOu?p=preview имеет свою работу до сих пор,динамический шаблон добавляет пустое значение на ng-repeat

Когда я выбираю параметр и нажмите на оном, он складывает в формате JSON, но не отображается в нг-повторе в шаблоне. Невозможно выяснить, почему это происходит.

Мои 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>

источник

2017-01-17 Sibi Raj

Сиби,

Я побежал ваш код и заметил, что нет выходных привязок внутри 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() после обновления массива, чтобы заставить угловое повторно проверить массив и обновить вывод, но я думаю он обновляется правильно, так как он работал, когда я сделал вышеупомянутую модификацию для вашего plunkr.

источник

2017-01-17 15:25:52 chrispy

спасибо @chrispy. Я буду работать над этим –

динамический шаблон добавляет пустое значение на ng-repeat

ответ

Смежные вопросы