Angularjs ng-change和ng-repeat工作不正常

时间:2018-02-12 19:26:19

标签: angularjs angularjs-directive angularjs-ng-repeat

在ng-change中,未在ngchange功能中设置所选值。 第一次当我选择一个值设置为null时,我再次尝试选择另一个值,它设置前一个选定值的值。

    var ngInitParams = JsonConvert.SerializeObject(Model);
    var firstVarId= Model.Variants.First().ProductId;
    var firstVarName= Model.Variants.First().Name;

    <section id="@inPageNavigationID" ng-controller="prodSpecsCtrl as main"
             ng-init="main.init('@firstVarId', '@firstVarName')">
        <div class="container" ng-init="main.loadSelect('@ngInitParams')">
            <div>
                <div class="row">
                    <div class="col-sm-6 fieldset">
                        <div class="form__item ">
                            <div>
                                <select class="-dropdown--two-columns"  name="productvariants" id="sel1" data-placeholder="@selectOptionVal" ng-model="variant.ProductId" 
                                        ng-change="main.load('{{variant.ProductId}}','{{(main.JsonVariants.Variants | filter: {ProductId:variant.ProductId})[0].Name}}')">
                                        <option value="" disabled>Select Model</option> 
                                        <option ng-repeat="variant in main.JsonVariants.Variants" value="{{variant.ProductId}}" selected="@firstVariantId" data-option-header="{{variant.CatalogCode}}">{{variant.Name}}</option>
                                </select>
                                <span class="fa fa-angle-down"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
      <section>


        this.init = function (varId, varName) {
            this.load(varId, varName);
        }
        this.loadSelect = function (strjson) {
            self.JsonVariants = JSON.parse(strjson);
        }

1 个答案:

答案 0 :(得分:0)

以下是选择中的ng-change的示例。

https://plnkr.co/edit/ZhJbVfPRCLoeFwYoi3Mp?p=preview

<body ng-controller="MainCtrl">
 <select ng-model="item" ng-change="changed(item)" ng-options="item.Name for item in items"></select>
 <p>ID:{{selected.ID}} Name: {{selected.Name}}</p>
 <p>You Selected: {{selected}}</p>
</body>

和控制器:

app.controller('MainCtrl', function($scope) {
 $scope.items = [];
 $scope.selected = {};

 $scope.changed = function(item) {
  $scope.selected = item;
 }

 function setupItems() {
  for (var i = 0; i < 10; i++) {
   var item = {ID: i, Name: "Item " + i}
   $scope.items.push(item);
 }
}  
setupItems();
});