変更イベントが角度のjs

Question

RestaurentInfoController.ts

module App.Controller { 
    import Services = Core.Services; 
    import Shared = Core.Shared; 

    export class RestaurentInfoController extends BaseController { 

     public restaurentName: any = []; 
     public checkBox: any; 
     public restaurent: any; 
     public foodTruckList: any = []; 
     public foodCategories: any = []; 
     public drinkCategories: any = []; 
     public restaurentId: any; 
     public itemList: any = []; 
     public category: any; 

     static $inject: Array<string> = ['baseAppService', 'userAuthorizationService', 'storageService', 'eventService',]; 

     constructor(
      appService: Services.BaseAppService 
      , public userAuthorizationService: Services.UserAuthorizationService, 
      public storageService: Services.StorageService, 
      public eventService: Services.AppEventBusService) { 
      super(appService); 
      this.getRestaurentList(); 
     } 
     routeTo(view) { 
      this.appService.routerService.routeToPage(view); 
     } 

     getRestaurentList =(): void => { 
      this.appService.networkService.get<any>(this.appService.appConstant.appUrls.getFoodTruckName).then((response) => { 
       this.foodTruckList = response.data; 
      }, 
       (error) => { }); 
     } 

     changeStatus =(): void => { 
      if (this.checkBox === '1') { 
       this.getFoodCategories(); 
      } 
      else if (this.checkBox === '2') { 
       this.getDrinkCategories(); 
      } 
     } 

     getFoodCategories =(): void => { 

      angular.forEach(this.foodTruckList, (item) => { 
       if (item.foodtruck_name === this.restaurent) { 
        this.restaurentId = item._id; 
       } 
      }); 

      this.appService.networkService.get<any>(`${this.appService.appConstant.appUrls.getFoodCategories}/${this.restaurentId}`).then((response) => { 
       this.foodCategories = response.data; 
       this.getItemList(); 
       console.log('categories ' + this.foodCategories); 
      }, 
       (error) => { }); 
     } 

     getDrinkCategories =(): void => { 

      angular.forEach(this.foodTruckList, (item) => { 
       if (item.foodtruck_name === this.restaurent) { 
        this.restaurentId = item._id; 
       } 
      }); 

      this.appService.networkService.get<any>(`${this.appService.appConstant.appUrls.getDrinkCategories}/${this.restaurentId}`).then((response) => { 
       this.foodCategories = response.data; 
       this.getItemList(); 
       console.log('popuar Items Loaded', this.foodTruckList); 
      }, 
       (error) => { }); 
     } 

     getItemList =(): void => { 
      if (this.checkBox === '1') { 
       var data = { 
        category: this.category 
       } 
       this.appService.networkService.get<any>(this.appService.appConstant.appUrls.getItemList, data).then((response) => { 
        this.itemList = response.data; 
        console.log('Items Loaded', this.itemList); 
       }, 
        (error) => { }); 
      } 
      else if (this.checkBox === '2') { 
       var data = { 
        category: this.category 
       } 
       this.appService.networkService.get<any>(this.appService.appConstant.appUrls.getDrinkList, data).then((response) => { 
        this.itemList = response.data; 
        console.log('Items Loaded', this.itemList); 
       }, 
        (error) => { }); 

      } 
     } 

     changeItemCategory =(): void => { 
      console.log("item category changed"); 
     } 

    } 

} 

restaurentInfo.html

ここ

<div class="restaurent-container"> 
    <div class="restaurent-info"> 
     <label for "restaurent">Restaurent name </label> 
     <select ng-model="vm.restaurent" class="restaurent" name="restaurent-category"> 
    <option ng-repeat="name in vm.foodTruckList">{{name.foodtruck_name}}</option> 
    </select> 
    </div> 
    <div class="food-container"> 
     <input type="radio" name="radio" id="food" class="radio" value="1" ng-model="vm.checkBox" ng-change="vm.changeStatus()" /> 
     <label style="margin-left:10px;" for="food">Food</label> 
     <input style="margin-left:10px;" type="radio" name="radio" id="drink" class="radio" value="2" ng-model="vm.checkBox" ng-change="vm.changeStatus()" /> 
     <label style="margin-left:10px;" for="drink">Drink</label> 
    </div> 

    <div style="margin-top:20px;" class="category-info"> 
     <label for "restaurent"> Category </label> 
     <select class="restaurent" name="restaurent-category"> 
    <option ng-change="vm.changeItemCategory()" ng-repeat="name in vm.foodCategories.category_name">{{name}}</option> 
    </select> 
    </div> 

    <div style="margin-top:20px;" class="item-info"> 
     <label for "restaurent">Item name</label> 
     <select class="restaurent" name="restaurent-category"> 
    <option ng-repeat="name in vm.drinkCategories.category_name">{{name}}</option> 
    </select> 
    </div> 

    <div style="margin-top:20px;" class="image-upload"> 
     <h5 style="margin-right:20px;">Image</h5> 
     <input type="file" name="img"> 
    </div> 
</div> 

にエラーを与え、私が欲しいのは、私はオプションは、DIV category-infoのために選択されたときを検出したいれます。しかし、どういうわけか、私に次のエラーを与えている：

Error: [$compile:ctreq] Controller 'ngModel', required by directive 'ngChange', can't be found! 
http://errors.angularjs.org/1.4.14/$compile/ctreq?p0=ngModel&p1=ngChange 
    at getControllers (http://localhost:3000/js/lib/angular.js:8452:13) 
    at nodeLinkFn (http://localhost:3000/js/lib/angular.js:8586:11) 
    at compositeLinkFn (http://localhost:3000/js/lib/angular.js:7975:13) 
    at publicLinkFn (http://localhost:3000/js/lib/angular.js:7855:30) 
    at boundTranscludeFn (http://localhost:3000/js/lib/angular.js:7993:9) 
    at controllersBoundTransclude (http://localhost:3000/js/lib/angular.js:8613:11) 
    at ngRepeatAction (http://localhost:3000/js/lib/angular.js:28112:15) 
    at $watchCollectionAction (http://localhost:3000/js/lib/angular.js:16093:13) 
    at Scope.prototype.$digest (http://localhost:3000/js/lib/angular.js:16228:23) 
    at Scope.prototype.$apply (http://localhost:3000/js/lib/angular.js:16492:13) 

Answer 1

をごngの変更を持っていますは、ng-modelと一緒にselectタグのng-changeです。 optionタグにng-changeを使用していない

<select class="restaurent" name="restaurent-category" ng-model="vm.modelVal" ng-change="vm.changeItemCategory()"> 
    <option ng-repeat="name in vm.foodCategories.category_name">{{name}}</option> 
    </select> 

Answer 2

あなたが選択でNG-モデルを持っている必要があり、また、selectタグで選択ボックス使用で

<select ng-model="vm.category" ng-change="vm.changeItemCategory()" class="restaurent" name="restaurent-category"> 
    <option ng-repeat="name in vm.foodCategories.category_name">{{name}}</option> 
</select>