I have angular js popup on my application when user click edit it repopulate the popup form and user change/update popup form my problem with select option because it won't work when user change his selection and click edit
<script type="text/ng-template" id="ActivitiesModalEdit.html">
<div class="modal-header">
<h3 class="modal-title">Edit Activity</h3>
</div>
<div class="modal-body">
<div class="panel-warning" data-ng-show="isValidationVisible()">
<div class="panel-heading-warning"><i class="icon-alert"></i>Required Items</div>
<div class="panel-body-warning">
<div data-ng-show="displayModel.showActivityValidator">Activity Required</div>
<div data-ng-show="displayModel.showReasonValidator">Reason Required</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label class="" id="lblActivityValue"><i class="icon-required"></i>Activity</label>
<p>
<select class="dropdownbox" data-ng-model="model.activityId" data-ng-options="item.recordId as item.name for item in activityTypes"></select>
</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<label class="" id="lblTimeSpentInMinutesValue">Time Spent</label>
<p>
<input kendo-numeric-text-box k-min="0" data-ng-model="model.timeSpentTimeHour" k-max="24" type="number" k-options="timeSpentSpinnerOptHour" />
<input kendo-numeric-text-box k-min="0" data-ng-model="model.timeSpentTimeMinute" k-max="59" type="number" k-options="timeSpentSpinnerOptMin" />
<span style="display: none;">{{calculateTimeSpent(model.timeSpentTimeHour,model.timeSpentTimeMinute)}}</span>
</p>
</div>
<div class="col-md-9">
<label class="" id="lblFiller"> </label>
<div class="well-time">{{model.timeSpent | formatTimeFromMinutes}}</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label class="" id="lblKilometersTravelledValue">Kilometers Travelled</label>
<p>
<input kendo-numeric-text-box k-min="0" k-max="1000" k-ng-model="model.kilometers" k-options="distanceSpinnerOpt" />
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label id="lblReason" for="txtReason"><i class="icon-required"></i>Reason</label>
<br />
<input class="form-control" data-ng-model="model.reason" maxlength="500" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" data-ng-click="ok(model)">Edit</button>
<button class="btn btn-warning" data-ng-click="cancel()">Close</button>
</div>
</script>
var app = angular.module('app');
var NonPatientActivitiesEditController = function ($scope, $modalInstance, selectedItem, valuesService) {
$scope.model = nonpatientDetailModel();
$scope.model.activity = selectedItem.activity;
$scope.model.activityId = selectedItem.activityId;
$scope.model.timeSpentTimeHour = Math.floor( selectedItem.timeSpent / 60 );
$scope.model.timeSpentTimeMinute = selectedItem.timeSpent % 60;
$scope.model.timeSpent = selectedItem.timeSpent;
$scope.model.kilometers = selectedItem.kilometers;
$scope.model.reason = selectedItem.reason;
$scope.displayModel = nonpatientDetailDisplayModelTemplate();
var errorHandler = function (reason) {
toastr[error](reason);
};
$scope.distanceSpinnerOpt = {
format: '# km'
};
$scope.ok = function (model) {
var validator = nonpatientDetailsValidator($scope);
if (validator.valid()) {
$modalInstance.close({ kilometers: model.kilometers, reason: model.reason, activityId: model.activityId, timeSpent: model.timeSpent });
} else {
validator.addWatches();
}
};
$scope.isValidationVisible = function () {
return $scope.displayModel.showActivityValidator ||
$scope.displayModel.showReasonValidator;
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
valuesService.getFormId('nonPatientForm')
.then(function (formId) {
getFieldValues(formId, 'nonPatientFormActivities').then(function (data) {
$scope.activityTypes = data;
});
}, errorHandler);
var getFieldValues = function (formId, fieldName) {
return valuesService.getFieldId(formId, fieldName)
.then(function (data) {
var fieldId = data;
return valuesService.getValues(formId, fieldId);
}, errorHandler);
};
var timeSpin = function () {
$scope.model.timeSpent = this.value();
};
$scope.timeSpentSpinnerOptMin = {
spin: timeSpin,
format: '# Minute'
};
$scope.timeSpentSpinnerOptHour = {
spin: timeSpin,
format: '# Hour'
};
$scope.calculateTimeSpent = function (hour, minute) {
var result = (hour * 60) + minute;
$scope.model.timeSpent = result;
}
};
app.controller('NonPatientActivitiesEditController', ['$scope', '$modalInstance', 'valuesService', NonPatientActivitiesEditController]);
Aucun commentaire:
Enregistrer un commentaire