Basic HTML element with AngularJS + bootstrap

angularjs-bootstrap-component.html

# Form element (form group)

// input
<div class="form-group">
    <label class="control-label col-sm-3">Tên danh mục</label>
    <div class="col-sm-9">
        <input ng-model="category.add_model.name"  
               type="text" class="form-control" 
               placeholder="Nhập tên danh mục" autofocus required>
    </div>
</div>

// Text area
<div class="form-group">
    <label class="control-label col-sm-3">Mô tả</label>
    <div class="col-sm-9">
        <textarea
            ng-model="category.add_model.description"
            class="form-control" 
            placeholder="Nhập mô tả"
            rows="3"></textarea>
    </div>
</div>

// Select repeat
<div class="form-group">
    <label class="control-label col-sm-3">Danh mục cha</label>
    <div class="col-sm-9">
        <select class="form-control" ng-model="selected_parent.id" ng-options="item.menu_id as item.menu_name for item in parent_menu" required> 
            <option></option>
        </select>
    </div>
</div>

// Checkbox
<div class="form-group">
    <label class="control-label col-sm-3">Chọn menu</label>
    <div class="col-sm-9">
        <div class="checkbox" ng-repeat="item in menu track by $index">
            <label>
                <input type="checkbox" value="{{item.menu_id}}" ng-model="item.selected">
                {{item.menu_name}}
            </label>
        </div>
    </div>
</div>

// Radio
<div class="form-group">
    <label class="control-label col-sm-3">Chọn nhóm quyền</label>
    <div class="col-sm-9">
        <div class="radio" ng-repeat="item in permission track by $index" >
            <label>
                <input name="permission" type="radio" ng-model="add_model.permission_id"  value="{{item.id}}" required>
                {{item.name}}
            </label>
        </div>
    </div>
</div>

// Basic modal
<!-- Modal add -->
<div class="modal fade" id="modalAdd" role="dialog">
    <div class="modal-dialog">

        <!-- Modal add content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Thêm mới dữ liệu</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="addForm" ng-submit="addData()">
                    <div class="form-group">
                        <label class="control-label col-sm-3">Tên menu</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="Nhập tên menu" ng-model="add_model.name" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">fa icon</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="Nhập kí hiệu fa icon của menu" ng-model="add_model.fa_icon" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">URL</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="Nhập url menu" ng-model="add_model.url">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" value="submit" form="addForm" class="btn btn-success">
                    <i class="fa fa-check"></i>
                    Thêm
                </button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">
                    <i class="fa fa-ban"></i>
                    Hủy
                </button>
            </div>
        </div>

    </div>
</div>
<!--End modal add-->