How to call AngularJs function inside laravel input field

Question

I have an HTML form. And I can use successfully angular js in that form. But when I convert that form field using laravel form builder I got an error.

This is my simple HTML and AngularJs and it's work fine

var app = angular.module('mainApp', []);
app.controller('availableDay', function($scope) {
  $scope.dayfrom = "";
  $scope.dayto = "";
  $scope.dayfull = function() {
    return $scope.dayfrom + "-" + $scope.dayto;
  }
});

<div class="form-group">
    <div class="row" ng-app="mainApp" ng-controller = "availableDay">
        <div class="col-lg-12">
            <h4 class="page-header">Available in a week</h4>
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Day From</label>
                    <select class="form-control" ng-model = "dayfrom">
                        <option>Monday</option>
                        <option>Tuesday</option>
                        <option>Wednesday</option>
                        <option>Thursday</option>
                        <option>Friday</option>
                        <option>Saturday</option>
                        <option>Sunday</option>
                    </select>
                </div> 
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Day To</label>
                    <select class="form-control" ng-model="dayto">
                        <option>Monday</option>
                        <option>Tuesday</option>
                        <option>Wednesday</option>
                        <option>Thursday</option>
                        <option>Friday</option>
                        <option>Saturday</option>
                        <option>Sunday</option>
                    </select>
                </div>
            </div>

            <div class="col-lg-12">
                <div class="form-group">
                    <label>Available Day</label>
                    <input class="form-control" type="text" value="{{dayfull()}}">
                </div>
            </div>
        </div>   
    </div> 
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

But when I am going to convert it using laravel form builder an error occurred

syntax error, unexpected '}'

var app = angular.module('mainApp', []);
        app.controller('availableDay', function($scope) {
            $scope.dayfrom = "";
            $scope.dayto = "";
            $scope.dayfull = function() {
                return $scope.dayfrom + "-" + $scope.dayto;
            }
        });

<div class="form-group">
    <div class="row" ng-app="mainApp" ng-controller = "availableDay">

        <div class="col-lg-12">
            <h4 class="page-header">Available in a week</h4>
            <div class="col-lg-6">
                <div class="form-group">

                    {{ Form::label("day from","Day From ") }}
    
                    {{ Form::select('day_from', [
                       'Monday' => 'Monday',
                       'Tuesday' => 'Tuesday',
                       'Wednesday' => 'Wednesday',
                       'Thursday' => 'Thursday',
                       'Friday' => 'Friday',
                       'Saturday' => 'Saturday',
                       'Sunday' => 'Sunday'], null, ['class' => 'form-control',
                       'ng-model' => 'dayfrom']
                    ) }}
                    
                </div>
            </div>    

            <div class="col-lg-6">
                <div class="form-group">
                    {{ Form::label("day to","Day To ") }}
    
                    {{ Form::select('day_to', [
                       'Monday' => 'Monday',
                       'Tuesday' => 'Tuesday',
                       'Wednesday' => 'Wednesday',
                       'Thursday' => 'Thursday',
                       'Friday' => 'Friday',
                       'Saturday' => 'Saturday',
                       'Sunday' => 'Sunday'], null, ['class' => 'form-control',
                       'ng-model' => 'dayto']
                    ) }}
                </div>
            </div>

            <div class="col-lg-12">
                <div class="form-group">
                    {{ Form::label("available day","Available Day ") }}

                    {{ Form::text("available_day", {{dayfull()}}, ["class" => "form-control"]) }}
                </div> 
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How can I use that AngularJs function {{dayfull()}} inside Laravel form builder?

Answer 1

Part of the problem here is that you can't use it in this format. The blade and angularjs markups conflict, as shown here. One way you could get around it is to concatenate the markup, so when it echoes, angularjs SHOULD process it:

{{ Form::text("available_day", '{{'.'dayfull()'.'}}', ["class" => "form-control"]) }}