AngularJs의 강의 수에 따라 동적 인 요일과 시간 필드

Question

교사에 따른 강의 수에 따라 동적 입력란 (입력 : 요일과 시간)을 만들고 싶습니다.

예 : 주당 강의가 하나만있는 경우 하루 입력에 대한 드롭 다운과 2 개의 입력 유형 시간이 2.00pm에서 3:00 pm 사이의 시간에 대해 생성됩니다. 첫 번째 주 2 회 강의 후 2 일째 이후 두 번째 날 입력과 두 번 째 시간 입력.

jquery와 그 작업을 사용했지만 jquery를 사용하여 조금 복잡했으며 '좋은 생각이 아닙니다.'라는 질문에 jquery를 사용했습니다.

나는 시도 :

<fieldset style="display:none;" class="slot" > 
     <div ng-repeat="i in days | limitTo:-lectures"> 

      <label>{{$index+1}} 
       <span>Select Day : </span> 
       <span> 
       <select ng-model="day" ng-options="x for x in days" ng-blur="sendTiming()"></select> 
       </span> 
      </label> 

      <label>Select Duration 
       <span > 
        <p id='datepair{{$index + 1}}' name='datepair{{$index + 1}}' class='datepair' data-language='javascript'> 
         <input type='text' class='time start' name='timefrom[{{$index + 1}}]' id='timefrom{{$index + 1}}' ng-model="fromtime[]" required ng-blur="sendTiming()" ng-value=""/> to 
         <input type='text' class='time end' id='timeto{{$index + 1}}' name='timeto[{{$index + 1}}]' ng-model="totime" required ng-blur="sendTiming()" ng-value=""/> 
        </p> 
       </span> 
      </label> 
     </div> 
    </fieldset> 

어떤 생각을 환영합니다. 감사

편집 : https://jsfiddle.net/8btsqbnu/

Answer 1

plucker

그것은 하루에 1 개 입력, 각 버튼 클릭에 대한 시간이 개 입력을 추가 : 여기에 바이올린입니다.

당신은 동적으로 컨트롤

.directive("lectureTimings", function(){ 
    return{ 
    restrict:'E', 
    scope:{ 
     days : '=', 
     timing: '=' 
    }, 
    templateUrl:'timings.html' 
    } 
}) 

지침 템플릿

<select ng-model="timing.day" ng-options="x for x in days" ng-blur="sendTiming()"></select> 
<br/> 
<input ng-model="timing.from"/>to<input ng-model="timing.to"/> 

메인 컨트롤러 템플릿

<input type="button" name="addmore" class="addmore" ng-click="addTiming();" value="Add Classes"/> 

    <div ng-repeat= "timing in timingsData"> 
    <br/> 
    <lecture-timings timing="timing" days="days"></lecture-timings> 
</div> 

때마다 사용자의 클릭 버튼

을 추가 할 수있는 격리 된 범위와 지침이 필요합니다

우리는 timingsData에 새로운 객체를 밀어 NG 반복이 자동으로 포럼은 당신이 당신의 문제 문을 해결하는 데 도움이 수 없습니다

$scope.addTiming = function(){ 

    $scope.timingsData.push({ 
    day:'', 
    from: '', 
    to: '' 
    }); 
}