特定のフォーム提出時に角材料チップをアレイとして提出するにはどうすればよいですか？

Question

私はこのようなJSONオブジェクトとしてフォームの下に提出したい：

object { id:1, version:0, roomNo:1, availability:"available", facility:{'a', 'b', 'c', 'd'} } 

マイフォーム画像

angular material chips form image

<div flex="10" id="lenth"> 
 
    <div ng-controller="roomController as controller" ng-cloak="" class="inputdemoErrors"> 
 
     <div class="card"> 
 

 
      <form ng-submit="controller.submit()" name="roomForm" > 
 

 
       <input type="hidden" ng-value="roomDTO.id" ng-model="roomDTO.id" /> 
 
       <input type="hidden" ng-value="roomDTO.version" ng-model="roomDTO.version" /> 
 
       <md-toolbar class="md-hue-2" ><div class="md-toolbar-tools"><span>{{roomHomeTitle}}</span></div></md-toolbar> 
 
       <div id="formBody"> 
 
        <md-input-container class="md-block"> 
 
         <label>Room no</label> 
 
         <input type="text" md-maxlength="30" required="" md-no-asterisk="" name="roomNo" ng-value="roomDTO.roomNo" ng-model="roomDTO.roomNo"> 
 
        </md-input-container> 
 
        <md-input-container class="md-block"> 
 
         <label>Availability</label> 
 
         <input type="text" md-maxlength="50" required="" md-no-asterisk="" name="availability" ng-value="roomDTO.isAvailable" ng-model="roomDTO.isAvailable"> 
 
        <md-input-container class="md-block" ng-init="controller.getAllFacilitiesForRoom()"> 
 
        <lable> Room Facility</lable> 
 
          <md-chips class="custom-chips" ng-model="controller.facilityList" readonly="controller.readonly" md-removable="controller.removable" > 
 
           <input type="hidden" ng-model={{$chip.id}}> 
 
           <md-chip-template> 
 

 
            <strong>{{$chip.facilityName}}</strong> 
 

 
          </md-chip-template></md-chips> 
 
        </md-input-container> 
 

 
        <div align="right"> 
 
         <md-input-container class="md-block"> 
 
          <div layout="row"> 
 

 
           <md-button type="reset" md-no-ink class="md-warn" >&#10160; Reset </md-button> 
 
           <md-button type="submit" md-no-ink class="md-primary">&#10004;Create </md-button> 
 
          </div> 
 
         </md-input-container> 
 
        </div> 
 
       </div> 
 
      </form> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

を次のようなアプローチにはいくつかの方法がありますこの問題。ここでは、コントローラから選択したチップをキャッチする簡単で一般的なアプローチについて述べました。

yourHTMLPage.html

<md-input-container class="md-block" ng-init="yourCtrl.getValueList()"> 
     <md-chips 
     multiple="true" md-no-cache="true" readonly="readOnly" ng-model="yourCtrl.bindValue" 
      md-on-select="yourCtrl.selectedChips($chip)" 
      md-on-remove="yourCtrl.deleteChips($chip)" > 
      <md-chip-template> 
       <strong >{{$chip.para1}}</strong> 
      </md-chip-template> 
    </md-input-container> 

controller.js

vm.selectedChips=function(chip){ 
    console.log(chip); 
    vm.yourDTO.youtList.push(chip); 
    // vm.yourList.push(chip); 
}; 



vm.deleteChips=function(chip){ 
    console.log(chip); 
    vm.deleteFaciltyList.push(chip); 
};