選擇時未觸發ng-change

Question

當所選項目更改時，我需要調用一個函數。

我還有另一個使用ng-change的函數，它會觸發。 我確保我有該對象的ng-model。 我相信該功能正在向angularjs注冊

<div class="form-group row">
        <label class="col-md-6 col-form-label required">Shutter 
Type</label>
 <div class="col-md-6">
    <select ng-model="vm.model.type" required="required" ng- 
        change="vm.setStilesValues(vm.model.type)" class="form-control">
        <option ng-repeat="t in vm.lists.types" ng-value="t.id">{{ 
t.name }}</option>
    </select>
   </div>
</div>

//Javascript
function EnclosureItemCtrl($q, $appCatalogs, $appPanels) {
let vm = this;


vm.$onInit = init;  //not included.. this function runs

vm.lists = {
    material: null,
    finish: null,
    hardware: null,
    types: null //[
    //  { id: 1, name: "Standard" },
    //  { id: 2, name: "Arch" },
    //  { id: 3, name: "Eyebrow" },
    //  { id: 4, name: "Sunburst" }
    //]
};

vm.results = null;
vm.louverSpacing = 0;
vm.userLouverSpacing = null;
vm.remove = remove;
vm.lookupTemplate = lookupTemplate;
vm.louverEstimate = louverEstimate;
    vm.adjustSpacing = adjustSpacing;
    vm.checkType = checkType;
    vm.convert = convert;    
    vm.louverCalc = {};
    vm.setStilesValues = setStilesValues; //function not being triggered





function setStilesValues(name) {
    switch (name) {
        case "Standard":
            vm.model.stiles = 2;
            vm.model.rails.top = 3.5;
            vm.model.rails.bottom = 3.5;
            break;
        case "Sunburst":
            vm.model.stiles = 2;
            vm.model.rails.top = 3.5;
            vm.model.rails.bottom = 3.5;
            break;
        case "Arch":
            vm.model.stiles = 2;
            vm.model.rails.top = 2;
            vm.model.rails.bottom = 3.5;
            break;
        case "Eyebrow":
            vm.model.stiles = 2;
            vm.model.rails.top = 3;
            vm.model.rails.bottom = 3.5;
            break;
    }
  }
}

函數setStilesValues（name）應該在更改時觸發，但不會觸發。

Answer 1

您使用ng-value =“ t.id”綁定vm.model.type，並且在ng-change時，您使用vm.model.type調用setStilesValues，其中包含id而不是name

 var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { let vm =$scope; vm.model = {rails:{}}; vm.lists = { material: null, finish: null, hardware: null, types: [{ id: 1, name: "Standard" }, { id: 2, name: "Arch" }, { id: 3, name: "Eyebrow" }, { id: 4, name: "Sunburst" } ] }; vm.setStilesValues = function (type) { console.log(type); switch (type) { case "Standard": vm.model.stiles = 2; vm.model.rails.top = 3.5; vm.model.rails.bottom = 3.5; break; case "Sunburst": vm.model.stiles = 2; vm.model.rails.top = 3.5; vm.model.rails.bottom = 3.5; break; case "Arch": vm.model.stiles = 2; vm.model.rails.top = 2; vm.model.rails.bottom = 3.5; break; case "Eyebrow": vm.model.stiles = 2; vm.model.rails.top = 3; vm.model.rails.bottom = 3.5; break; } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <div class="form-group row"> <label class="col-md-6 col-form-label required">Shutter Type</label> <div class="col-md-6"> <select ng-model="model.type" required="required" ng-change="setStilesValues(model.type)" class="form-control"> <option ng-repeat="t in lists.types" ng-value="t.name">{{t.name }}</option> </select> </div> <label class="col-md-6 col-form-label required">stiles={{model.stiles}}</label> <label class="col-md-6 col-form-label required">rails.top={{model.rails.top}}</label> <label class="col-md-6 col-form-label required">rails.bottom{{model.rails.bottom}}</label> </div> </div>