直接上代碼解釋:
<select form-select2-help class="form-control select2" select-num-format=""
ng-model="${v_model_name}.shoppeIds" multiple="multiple" style="width: 100%" name="select_shoppeIds"
ng-change="selectAreaByShoppeIds(${v_model_name}.shoppeIds)">
<option ng-repeat="item in shoppeData" ng-selected="" value="{{item.code}}" >{{item.code}}</option>
</select>
界面用ftl格式寫的:
1. form-select2-help 指令引入select2標籤
2. multiple 多選標籤
3. ng-change 用於級聯效果,看業務需求而定
4. ng-repeat 界面異步加載下拉框數據 shoppeData
5. ng-seleted 設置選中狀態
6. value,保存後,後臺拿到的參數字段
7. {{item.code}} code是界面展示數據的字段
下面是angularJS :
CRMIndexApp
.directive("createContractDirective", ["commonCrudUtilService", "$sce", "$timeout",
function (commonCrudUtilService, $sce, $timeout) {
return { scope: false, restrict: "ACE", require: "?^containerContent", compile: function (element, attributes) {
return {
pre: function preLink($scope, element, attributes, ctrs) {
},
post: function postLink($scope, element, attrs, ctrs) {
/** * 刷新滾動監聽事件 */
$scope.refreshSpy = function () {
$('.zero-new-box').scrollspy('refresh');
}
}
};
}, controller: function ($scope, $element, $attrs) {
/** * 更新事件 */
$scope.udpateContractInfo = function (e) {
var ids = $scope.getSelectedIds();
if (ids.length != 1) {
PWindow.alert("請選擇一條數據 ") return;
}
var submiturl = ROOT_CONFIG.BASE_PATH + "contractinfo/" + ids[0];
commonCrudUtilService.get($scope, {}, submiturl, function (data) {
console.log(data);
$scope['ContractInfo'] = data.content;
var contractInfoData = data.content; //根據樓層id查詢鋪位信息
var floorId = data.content.floorId;
if (floorId != undefined && floorId != null && floorId != '') {
commonCrudUtilService.get( $scope, {"floorId": floorId}, ROOT_CONFIG.BASE_PATH + "mis/shoppeinfo/list", function (data) {
//對option 下拉框數據賦值
$scope.shoppeData = data.content;
}
)
}
注意下面幾行是重點:
$timeout(function () {
//初始化select2()
$('select[name="select_shoppeIds"]').select2();
//對之前新增的數據,進行輸入框賦值
$('select[name="select_shoppeIds"]').val( contractInfoData.shoppeIds).trigger('change');
}, 300)
}, function () {
PWindow.alert("失敗");
})
}
}
};
}])