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-change标记中的select和ng-model。请勿使用ng-change代码

上的option

  <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-model，并在select标签中进行ng-change

<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>

下拉列表中的更改事件会给出角度js中的错误

2 个答案: