Show correct status with ng-click

Question

Show correct status with ng-click

Navigation

#1 by (2 votes)

1

I am trying to do a función that I call doing ng-click , where I want to show the status corresponding to the ítem that I give click , that is, if I give click to the object banana that only me show the state disponible and not the others, and change the estado when I give click to another object.

PD: This code can be copied and executed in your ID and works perfectly, I appreciate any help and recommendation.

<!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>

javascript jquery html angularjs

asked by zerokira 04.10.2017 в 16:05

source

1 answer

Unknown column when using WHERE (ERROR) codeigniter Problem with jQuery Ajax and PHP

score 2 · Accepted Answer

This is the solution to your problem:

<!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>

I hope you serve, greetings!