1

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>

1 respuesta 1

2

Esta es la solución a tu problema:

<!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(sector) {
                $scope.fax = true;
                $scope.estado = sector.estado;
            }

            $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(sector)">
                        <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-if="fax">
                        {{ 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>

Espero que te sirva, saludos !

4
  • @CamiloVazquez gracias por tu respuesta, estaba pensando algo así pero no sabia como hacerlo jeje, le mandaste como parámetro el estado y listo?
    – zerokira
    Commented el 4 oct. 2017 a las 14:16
  • @Pablo claro, al mandar como parámetro estarías utilizando únicamente la información del elemento al que le diste click, ah y debes quitar el ng-repeat que tenias en el elemento donde se ejecuta el ng-if="fax" Commented el 4 oct. 2017 a las 14:20
  • @CamiloVazquez me puedes colaborar con otra pregunta que acabe de realizar con ng-class?
    – zerokira
    Commented el 4 oct. 2017 a las 19:47
  • @Pablo Ya te respondí en la pregunta mencionada Commented el 4 oct. 2017 a las 20:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.