angularJS update inline script with model

Question

I need to update datetimepicker[i] script inside ng-repeat but I do not know how to do that.

<div class='input-group date' id='datetimepicker{{$index+1}}'>

work successfully and made list of

<div class='input-group date' id='datetimepicker1'>

<div class='input-group date' id='datetimepicker2'>

but problem is script not update from model data

$('#datetimepicker{{$index+1}}').datetimepicker();

result is

$('#datetimepicker{{$index+1}}').datetimepicker();

I want to '#datetimepicker{{$index+1}}' change to'#datetimepicker1'

<tr data-ng-repeat="row in game.result">
    <td>{{$index+1}}</td>
    <td ng-bind="row.host"></td>
    @*<td>
            <input class="form-control text-center" data-ng-model="row.dateStart" />
        </td>*@
    <td ng-controller="DatepickerDemoCtrl">
        <div class="input-group w-360">
            <div class='input-group date' id='datetimepicker{{$index+1}}'>
                <input data-format="yyyy/MM/dd hh:mm:ss" ng-model="row.dateStart" type='text' class="form-control" ng-required="true" />
                <span class="input-group-addon">
                    <span class="fa fa-calendar"></span>
                </span>
            </div>
             <script type="text/javascript">
                $(function () {
                    $('#datetimepicker{{$index+1}}').datetimepicker();
                          });
            </script>
        </div>
    </td>
    <td>
        <select ng-model="row.gameState"
                ng-options="c.Value as c.Text for c in game.states" class="form-control" required></select>
    </td>
    <td>
        <input class="form-control text-center" data-ng-model="row.hostGoals" type="number" required />
    </td>
    <td>
        <input class="form-control text-center" data-ng-model="row.guestGoals" type="number" required />
    </td>
    <td ng-bind="row.guest"></td>
</tr>

Update

I move my code inside controller and make html in controller

Controller - MVC

onlineResult.dateHtml = @"<script type=""text/javascript"">$(function () {$('#datetimepicker"+(i + 1).ToString()+ "').datetimepicker({format: 'YYYY/MM/DD HH:mm:ss'});});</script>";

and update view to

<p compile data-ng-bind-html="to_trusted(row.dateHtml)"></p>

My new problem is model bind in Get but not changed in Post. When i submit form my Get data sent to controller not changed data

whole approach won't work....this needs to be done in custom directive. And you most likely will find an angular module for this datepicker available already — charlietfl, Jan 02 '17 at 10:03
Don't put script tags in angular templates...they get stripped out and won't execute — charlietfl, Jan 02 '17 at 10:06
`ng-controller="DatepickerDemoCtrl">` inside of `ng-repeat`. Worst approach ever. Actually which controller using for this template? — Ramesh Rajendran, Jan 02 '17 at 10:09
that is not how to do it....you use a custom directive that will expose the element and the plugin initialization code gets called inside the link function of that directive for that element — charlietfl, Jan 02 '17 at 10:31
Did you even try searching for datepicker modules? there are numerous ones around..not sure about that specific datetimepicker but there are datetime modules — charlietfl, Jan 02 '17 at 10:32
and there is probably an angular module for it. You really need to read [Thinking in angular when i have a jQuery background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) then do a search for jQuery plugins and angular directives if you don't find an angular module for that picker — charlietfl, Jan 02 '17 at 10:35
@charlietfl yes thank you I will use angular version of datetime picker — , Jan 02 '17 at 10:36
some modules may just be wrappers for jquery plugins...but they simplify re-inventing the wheel — charlietfl, Jan 02 '17 at 10:37

score 0 · Answer 1 · answered Jan 02 '17 at 20:05

0

I used angularjs directive datetimepicker

https://material.angularjs.org/latest/demo/datepicker

answered Jan 02 '17 at 20:05

angularJS update inline script with model

Update

1 Answers1