根據內部選擇更改輸入文字Modal

Question

我知道已經有關於同一問題的一些帖子，但在我的情況下，似乎我無法解決問題，因爲我的內容是在模態內。

這種模式包含一個表單，一個選擇和一個提交按鈕，我認爲這個問題出現在模式的主體如何實現，因爲它附加了X個選擇和按鈕，取決於找到的項目。

下面的模式的代碼：

<form action="/foo/update_foo" method="POST"> 
    {{ csrf_field() }} 
    <div id="flash-overlay-modal" class="modal fade {{ $modalClass or '' }}"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h3 class="modal-title">{{ $title }}</h3> 
      </div> 
      <div class="modal-body"> 
       <p>{!! $body !!}</p> 
      </div> 
      <div class="modal-footer"> 
       <input type="submit" class="btn btn-info" value="Save changes"> 
       <button type="button" class="btn btn-warning" data-dismiss="modal">Ignore</button> 
      </div> 
     </div> 
    </div> 
    </div> 
</form> 

這是被附加到模式的$體代碼：

<div id="modal" class="row"> 
    <div class="col-md-12"> 
     <p class="lead"> 
      <span style="color:red">{{ $deleted->foo }}</span> 
      with quantity {{ $item['quantity'] }} has been removed, please select a replacement. 
     </p> 
     <div> 
      <select class="selectpicker" name="foo" id="foo"> 
       @foreach($replacements as $replacement): 
       <option value="{{ $replacement->id }}">{{ $replacement->FOO}}</option> 
       @endforeach 
      </select> 
      {{ csrf_field() }} 
      <input type="hidden" name="qty" value="{{$item['quantity'] }}"> 
      <input type="hidden" name="fooBar" value="{{ $fooBar }}"> 
     </div> 
     <br> 
     <div class="input-group"> 
      <span class="input-group-addon">Description:</span> 
      <input id="description" type="text" class="form-control" name="description" value="" /> 
     </div> 
     <br><br> 
    </div> 
</div> 

如果我添加JavaScript來的模式，它不起作用，因爲它從父頁面獲取它。

任何想法它可以做什麼。

預先感謝您！

Answer 1

與角JS

這裏試試，這是一個例子

angular.module('pdl', []).controller('player', function($scope) { 
 
    $scope.players = [{ 
 
    "id": 3, 
 
    "name": "Nadal", 
 
    }, { 
 
    "id": 4, 
 
    "name": "Federer" 
 
    }] 
 
});

<script src="https://code.angularjs.org/1.5.5/angular.min.js"></script> 
 

 
<div ng-app="pdl" ng-controller="player"> 
 
    <input type="text" ng-model="player.name" /> 
 
    <select ng-model="player" ng-options="player as player.name for player in players"> 
 
    </select> 
 
</div>