1.View里代码如下:
<div class="form-group" ng-controller="CitySelectedContrller as vm">
<select name="provinceList" class="provinceList" ng-model="provinceList.id" ng-change="vm.provinceListChange(provinceList.id);cityList.id='1';" ng-options="obj.id as obj.name for obj in vm.provinceList"><option value="">-- 省份 --</option></select>
<select name="cityList" class="cityList" ng-model="cityList.id" ng-change="vm.cityListChange(cityList.id);" ng-options="obj.name for obj in vm.cityList"><option value="">-- 市区 --</option></select>
<select name="areaList" class="areaList" ng-model="areaList.id" ng-change="vm.areaListChange(areaList.id);" ng-options="obj.name for obj in vm.areaList"><option value="">-- 区县 --</option></select>
</div>
2.根据封装好的AngularJS。先注册app.然后实现controller。
$$page("cityselected.controller", {
//创建数据上下文中的绑定数据
_controller: function(vm, scope) {
this._vm.provinceList = provinces; //省份素具
getCityListByProvince = null;
this._vm.cityList = getCityListByProvince; //城市数据
getAreaListByProvince = null;
this._vm.areaList = getAreaListByProvince; //城市数据
},
_initCallback: function(index) {
var self = this;
self._vm.provinceListChange = function (index) {
self._provinceListChange(index);
};
self._vm.cityListChange = function (index) {
self._cityListChange(index);
};
self._vm.areaListChange = function (index) {
self._areaListChange(index);
};
},
_provinceListChange: function (index) {
getCityListByProvince = GetCityByProvinceid(index);
this._vm.cityList = getCityListByProvince;
},
_cityListChange: function (index) {
getAreaListByProvince = GetAreasByCityid(index);
this._vm.areaList = getAreaListByProvince;
},
_areaListChange: function (index) {
},
});
angular.module('myApp').controller('CitySelectedContrller', $$page.cityselected_controller);
$$page.cityselected_controller.$inject = ['$scope'];
问题在于:
如下这个Function:
_provinceListChange: function (index) {
getCityListByProvince = GetCityByProvinceid(index);
this._vm.cityList = getCityListByProvince;
},
当页面改变触发这个方法 cityList 重新赋值,在调试中cityList 已经赋值,但是页面上没有反应。