行を動的に追加するtrのng-repeat。

Question

<tr class="workTime" ng-repeat="worktime in doctor.shift" >         
    <td><select name="multipleSelect" class="form-control selectpicker"   
    id="multipleSelect" ng-model="doctor.shift.workDays" multiple> 
      <option ng-repeat="days in weekdays">{{days}}</option>          
     </select> 
    </td> 
    <td><input type="text" class="form-control" ng-model =      
    "doctor.shift.workFrom"></td> 
    <td><input type="text" class="form-control" ng-model =  
    "doctor.shift.workTo"> 
    </td> 
    <td><span class="glyphicon **glyphicon-plus** glyph_size " ng- 
    click="addWorkTime()" aria-hidden="true "></span></td> 
</tr> 

私はAngularを初めて使用しています。私はglyphicon-plusをクリックしてtrを繰り返したいと思います。私はこれを行う方法がわかりません。私はデータを取得していません。私はグリフコンプラスをクリックするだけで、それぞれのフィールドを持つ行を追加したいと思う。いくつか私はこれを解決するために手伝ってくださいできますか？そして、もし私がスクリプトを書く必要があれば。私は

Answer 1

OKを書くためにどのようなスクリプトなければならないのは、ここでの並べ替えの答えです：

var app = angular.module('main', []); 
app.controller('ctrl', function ($scope) { 
    // create an object to hold the collection 
    $scope.doctor = { 
     shift : { 
     worktimes: [] 
     } 
    }; 

    $scope.addWorkTime = function() { 
     // add an element to the end of the array 
     $scope.doctor.shift.worktimes.push({ 
       workDay: 1, 
      workFrom: '9:00', 
      workTo: '22:00' 
     }); 
    }; 
    // add an initial row - if there are no rows, there's no add button! 
    $scope.addWorkTime(); 
}); 

https://jsfiddle.net/cglist/t661eh5y/5/?utm_source=website&utm_medium=embed&utm_campaign=t661eh5y

が長い答えはあなただけだ、それは明らかにあなたのHTML内のいくつか面白いものがあるということですAngularを使い始める。 初心者の方は、 ng-repeat = "doctor.shiftの作業時間" ... "作業時間"は、オブジェクトまたは（可能性の高い）コレクションを反復するためにのみ作成される一時変数です。したがって、繰り返されるテンプレートでは、「worktime.workFrom」のようなものにバインドしたいと考えています。 あなたのHTMLとデータモデルを調整して、すべての作業を行いながら、達成しようとしている。

次は、あなたの選択ボックスのオプションのために、それを行うための現在の方法は、「ngOptions」、およびない「ngRepeat」である：https://docs.angularjs.org/api/ng/directive/ngOptions