нг-изменение не срабатывает при выборе

Question

У меня есть функция, которую нужно вызвать при изменении выбранного элемента.

У меня есть другая функция, использующая ng-change, и она срабатывает.Я удостоверился, что у меня есть ng-модель для объекта.Я считаю, что функция регистрируется с помощью 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

вы связываете vm.model.type с ng-value = "t.id", а при изменении ng вы вызываете setStilesValues ​​с vm.model.type, который содержит идентификатор, а не имя

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>