lundi 29 juin 2015

user can't change select option on populated angular windows opoup


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">&nbsp</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