Question

我对AngularJS很新。我正在开发一个项目，我需要根据按钮点击附加某些html选择标签。每个选择标记都绑定到ng-model属性（硬编码）。现在我面临的问题是，一旦我附加了2个以上的html模板并在select标签中进行了更改，那么所选的值将反映在绑定到相应ng-model属性的所有标签上（这是非常明显的）。我想知道是否有办法绕过它，而不是以不同的方式命名每个ng模型。

JS代码：

EsConnector.directive("placeholderid", function($compile, $rootScope, queryService, chartOptions){

 return {
 restrict : 'A',
 scope : true,


 link : function($scope, element, attrs){

$scope.current_mount1 = "iscsi";
$scope.current_dedupe1 = "on";
$scope.y_axis_param1 = "Total iops";
var totalIops =[];
var totalBandwidth =[];

    element.bind("click", function(){




        $scope.count++;
        $scope.placeholdervalue = "placeholder12"+$scope.count;




        var compiledHTML = $compile('<span class="static" id='+$scope.placeholdervalue+'>choose mount type<select ng-bind="current_mount1" ng-options="o as o for o in mount_type"></select>choose dedupe<select ng-model="current_dedupe1" ng-options="o as o for o in dedupe"></select>choose y axis param<select ng-model="y_axis_param1" ng-options="o as o for o in y_axis_param_options"></select></span><div id='+$scope.count+' style=width:1400px;height:300px></div>')($scope);


        $("#space-for-buttons").append(compiledHTML);

        $scope.$apply();




    $(".static").children().each(function() {


            $(this).on("change", function(){
            var id = $(this).closest("span").attr("id");

            var chartId = id.slice(-1);


            queryService.testing($scope.current_mount1, $scope.current_dedupe1, function(response){
            var watever = response.hits.hits;

            dataToBePlot = chartOptions.calcParams(watever, totalIops, totalBandwidth, $scope.y_axis_param1);

            chartOptions.creatingGraph(dataToBePlot, $scope.y_axis_param1, chartId);


        });




            });

    });

    });
}
 }

   });

代码说明：这只是我发布的指令。我附加了我编译的HTML并使用$ scope.apply将select标签设置为默认值。每当更改任何选择标记时，我正在对所选值执行一组操作（对服务的函数调用）。

如您所见，附加的ng-model属性是相同的。因此，当更改一个选择标记时，即使显示的数据与其不匹配，该值也会反映在所有附加的HTML上。

Answer 1

希望PLunker对您有用。你需要有一种方式绑定这些属性

<p>Hello {{name}}!</p> 
<input ng-model="name"/>
<br>Single way binding: {{::name}}

如果我误解了你的问题，请告诉我

Answer 2

从您的描述和代码中了解您的整个要求有点难，如果我错了，请纠正我：您试图动态添加按钮点击下拉菜单，然后尝试跟踪每个按钮

如果您为每个生成的项目提供相同的ng-model，那么它们将绑定到同一个对象，并且它们的行为是同步的，即角度的工作方式。

您可以做的是，将您的结构更改为数组，然后将ng-model分配给元素，以便您可以方便地跟踪每个元素。我知道您来自jquery基于您的代码，所以让我告诉您angular做事方式。

angular.module('test', []).controller('Test', Test);

function Test($scope) {
  $scope.itemArray = [
    { id: 1, selected: "op1" },
    { id: 2, selected: "op2" }
  ];
  
  $scope.optionList = [
    { name: "Option 1", value: "op1" },
    { name: "Option 2", value: "op2" },
    { name: "Option 3", value: "op3" }
  ]
  
  $scope.addItem = function() {
    var newItem = { id: $scope.itemArray.length + 1, selected: "" };
    $scope.itemArray.push(newItem);
  }
  
  $scope.changeItem = function(item) {
    alert("changed item " + item.id + " to " + item.selected);
  }
}

select {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
  <button type='button' ng-click='addItem()'>Add</button>
  <select ng-repeat='item in itemArray' 
          ng-options='option.value as option.name for option in optionList'
          ng-model='item.selected'
          ng-change='changeItem(item)'></select>
</div>

防止在所有选定标记中反映ng-model值

2 个答案: