query test

by eprouver

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div ng-app="rm">
    <div class="form">
        <div class="form-group">
            <label class="form-label"> Test:
                <input class="form-control" ng-model="$root.newRule.name"/>
                
            </label>
            
        </div>
    <button class="btn btn-success" ng-click="$root.addRule()">Add</button>        
    </div>
    
    <table class="table">
        <tr>
            <th>Name</th>
            <th>Delete</th>
        </tr>
    <tr ng-repeat="rule in $root.rules">
        <td>{{rule.name}}</td>
        <td><div class="btn btn-danger">&times;</div></td>
    </tr>
    </table>
    

</div>

CSS

.addquestion {
    position: relative;
    width: 2em;
    margin-left: -0.7em;
    border: 0;
    background: rgb(92, 184, 92);
    color: white;
    font-weight: bold;
    border-radius: 5px;
    font-size: 2em;
}
.adderrow {
    margin-right: -2px;
    margin-left: -18px;
}
.close {
    text-shadow: none;
    font-weight: normal;
    color: white;
}
.rangerow {
    background: rgb(227, 221, 216);
}
.markrow {
    position: relative;
    margin-right: -4px;
    height: 1.25em;
}
.qmark {
    position: absolute;
    height: 1.7em;
    padding: 0;
    width: 11px;
}
.final {
    font-size: 25px;
    height: auto;
}
select {
    padding: 6px 12px;
    width: 100%;
}

JavaScript

angular.module('rm', []).run(['$rootScope', '$http', function ($rootScope, $http) {
    $http.get('http://mojo', function(){
    }, function(){
    	console.log('fail');
    })
    
    $rootScope.rules = [{
    	name: 'sample'
    }];
    
    $rootScope.addRule = function(){
    	$rootScope.rules.push(angular.copy($rootScope.newRule));
    };
    
    $rootScope.newRule = {
    	name: 'test'
    };


}]);