2016-06-30 9 views
0

Я пытаюсь получить его так, чтобы # water div будет отображаться при нажатии кнопки воды и не будет, когда нажата кнопка включения питания. Я пытаюсь использовать контроллер, который я сделал, но до сих пор он не работал.Show and Hide Controller не работает, AngularJS

HTML

<head> 


    <meta charset="utf-8"> 
    <title>test</title> 
    <link rel="stylesheet" href="css/wisdom.css"> 
    <link rel="stylesheet" href="css/bootstrap.css">s 
    <script src="http://code.jquery.com/jquery-1.12.2.min.js"></script> 
    <script src="http://jquery-1.12.2.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 


</head> 

<body ng-app="WebApp"> 

    <div id="water" ng-include src="'menu.html'"></div> 
    </br> 
    </br> 


    <section ng-controller="StateController"> 
    <div class="btn-group" role="group" ng-model="show" > 
      <button type="button" class="btn btn-primary" ng-clicked="StateController.setState(1)">Water</button> 
      <button type="button" class="btn btn-warning" ng-clicked="StateController.setState(2)">Energy</button> 

     </br> 
     </br> 
    <div ng-include src="'panels.html'" ng-show="StateController.isSet(1)"> </div> 
    </div> 
    </section> 

    <script src="app.js"></script> 
</body> 

JS

var app = angular.module('WebApp', []); 
app.controller('StateController', function(){ 
    this.state = 1; 

    this.setState = function(selectedState){ 
     this.state = selectedState; 
    }; 

    this.isSet = function(givenState){ 
     return this.state === givenState; 
    }; 
}); 

ответ

1

сделать ниже изменения

HTML

<div id="water" ng-show="something" ng-include src="'menu.html'"></div> 
<button type="button" class="btn btn-primary" ng-click="setState(1)">Water</button> 
      <button type="button" class="btn btn-warning" ng-click="setState(2)">Energy</button> 

controller.js

var app = angular.module('WebApp', []); 
app.controller('StateController', function($scope){ 
    $scope.setState=function(a){ 
      if(a==1) 
      { 
       $scope.something=true; 
      } 
      else{ 
       $scope.something=false; 
       } 
} 
}); 

, если вы хотите, чтобы показать воду DIV iniatilly затем добавить это перед функцией SetState в контроллере

$scope.something=true; 

если и не хотите, то сделать это как ложь

 Смежные вопросы

  • Нет связанных вопросов^_^