選択した内容に基づいて入力テキストを変更する

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>