Estoy tratando de hacer una función
que llamo haciendo ng-click
, donde quiero mostrar el estado correspondietne al ítem
que le doy click
, es decir si doy click
al objeto banana
que solo me muestre el estado disponible
y no los otros, y que cambie el estado
cuando le doy click
a otro objeto.
PD: Este código lo puedes copiar y ejecutarlo en tu ID y funciona perfectamente, agradezco cualquier tipo de ayuda y recomendación.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<title></title>
<!-- Jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Angular js -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
</head>
<body>
<script>
var app = angular.module("myApp", ['ngMaterial']);
app.controller("myCtrl", function($scope) {
$scope.toggleSi = function() {
$scope.fax = true;
console.log($scope.fax);
}
$scope.lst = [
{item:'banana', estado: 'disponible'},
{item: 'apple', estado: 'proceso'},
{item:'milk', estado: 'terminando'},
{item: 'tomato', estado: 'disponible'},
{item:'juice', estado: 'desecho'}
]
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<div md-whiteframe="2" layout="row">
<div layout="column" flex="50">
<md-card ng-repeat="sector in lst" ng-click="toggleSi()">
<md-card-content>
<h2>{{ sector.item }}</h2>
<p>{{ sector.estado }}</p>
</md-card-content>
</md-card>
</div>
<div flex="40">
<md-content layout-padding layout-wrap ng-repeat="sector in lst" ng-if="fax">
{{ sector.estado }}
</md-content>
</div>
</div>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>
</html>