Consulta Cliente

Consulta de cliente pelo seu código

by Tiago Sousa

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container" ng-app>
    <div class="row">
        <div class="col-sm-12">
            <div id="search">
                <h1>Directorio de Clientes</h1>
                <input ng-model='query' type="text" placeholder="Procurar por id do cleinte"/>
            </div>
            <div ng-controller="ctrlClientes">
                <ul id="cltList">
                    <li ng-repeat="cliente in clientes | filter: query">
                        <span>{{cliente.nome}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

#cltList {
    list-style: none;
    padding-left: 0px;
    margin: 10px 0;
}
#cltList > li {
    padding: 5px 10px;
    font-size: 16px;
}
#cltList > li:nth-child(odd){
    background-color: #F2C79C;
}
#cltList > li:nth-child(even){
    background-color: #EFDFAD;
}

JavaScript

function ctrlClientes($scope) {
    $scope.clientes = [
        {
            'id' : 1,
            'nome' : 'Acesita',
            'industria' : 'Aço'
        },
        {
            'id' : 2,
            'nome' : 'América Latina Logística',
            'industria' : 'Transportes'
        },
        {
            'id' : 3,
            'nome' : 'Avibrás',
            'industria' : 'Aeroespacial e defesa'
        }
    ];
}