CODEWITHSUNDEEP
javascriptjqueryangularjs
nemo_87
nemo_87

Reputation: 4791

Show string result from function in a label using AngularJs

What is the best way to call function that will return string and show that string in a label when using angularJs?

I have three drop downs, and when I select values in all of them I want to show a label. Content of a label is calculated in one function so on that moment (when all 3 drop downs have some values selected) I need to call function that will return value for label as well.

All that hiding/showing label logic I have put in html like this:

<div class="col-md-2" 
        ng-show="newTestSessionCtrl.formData.sessionTime && newTestSessionCtrl.formData.timeZone && newTestSessionCtrl.formData.sessionCloseInterval">
    <lable>Your local time</lable>
    <div ng-value="convertSelectedTimeZoneToClients()"></div>
</div>

This is convertSelectedTimeZoneToClients() function code:

convertSelectedTimeZoneToClients() {
    let timeZoneInfo = {
        usersTimeZone: this.$rootScope.mtz.tz.guess(),
        utcOffset: this.formData.timeZone.offset,
        selectedDateTime: this.toJSONLocal(this.formData.sessionDate) + " " + this.formData.sessionTime 
    };

    let utcTime  = this.$rootScope.mtz.utc(timeZoneInfo.selectedDateTime).utcOffset(timeZoneInfo.utcOffset).format("YYYY-MM-DD HH:mm");
    let localTime = this.$rootScope.mtz.utc(utcTime).toDate();
    localTime = this.$rootScope.mtz(localTime).format("YYYY-MM-DD HH:mm");
    return localTime;
}

So when values are selected I am showing label that says: Your local time And underneath I want to show result from convertSelectedTimeZoneToClients()that will be basically string in 'YYYY-MM-DD HH:mm' format.

Can I preform something like this on the html as well or I will have to move to controller? What is the best or easiest way to accomplish this?

I have tried ng-value, but I guess I am doing wrongly. Nothing gets show, but I do not get any errors in console as well.

Upvotes: 1

Views: 2050

Answers (3)

Parth Trivedi
Parth Trivedi

Reputation: 3832

You should call this function on change of selected value

<select ng-change="convertSelectedTimeZoneToClients();"></select>


<div class="col-md-2" 
        ng-show="newTestSessionCtrl.formData.sessionTime && newTestSessionCtrl.formData.timeZone && newTestSessionCtrl.formData.sessionCloseInterval">
    <lable>Your local time</lable>
    <div ng-bind="clientDateTimeZone"></div>
</div>

and reflect $scope.clientDateTimeZone = yourreturnedvalue

No need to return any thing

   $scope.convertSelectedTimeZoneToClients = function()  {
    let timeZoneInfo = {
      usersTimeZone: this.$rootScope.mtz.tz.guess(),
      utcOffset: this.formData.timeZone.offset,
      selectedDateTime: this.toJSONLocal(this.formData.sessionDate) + " " + this.formData.sessionTime
    };

    let utcTime = this.$rootScope.mtz.utc(timeZoneInfo.selectedDateTime).utcOffset(timeZoneInfo.utcOffset).format("YYYY-MM-DD HH:mm");
    let localTime = this.$rootScope.mtz.utc(utcTime).toDate();
    localTime = this.$rootScope.mtz(localTime).format("YYYY-MM-DD HH:mm");
    //set It here
    $scope.clientDateTimeZone = localTime
      //return localTime;
  }

Upvotes: 0

NTP
NTP

Reputation: 4448

in your function you can check if your drop downs are selected, then calculate and return result

$scope.getData = function () {
        if ($scope.ValueOfFirstDropDown != undefined && $scope.ValueOfSecondDropDown != undefined && $scope.ValueOfThirdDropDown != undefined) {
            //calculate result
            return result;

        }

    }

and in your html

<label>{{getData()}}</label>

Upvotes: 1

wroniasty
wroniasty

Reputation: 8052

Try this:

<div ng-bind="convertSelectedTimeZoneToClients()"></div>

Upvotes: 0

Related Questions