jquery is not working or angular js nghide show not working in angular routing page

Issue

i am using angular 1.6 routing and in ng-view i am showing my routing page data, but in routing pages my jquery code and angular code for hide and show are not working please help me. i am new in angularjs.

<style>
.image-upload > input {
    display:none;
}
.edit-picture {
 position: absolute;
left: 46.5%;
top: 32%;
}
@media only screen and (max-width: 768px){
.edit-picture {
position: absolute;
left: 46.5%;
top: 78%;
 }
 }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#profile-button").click(function(){
    $("#2").show(1000);
    $("#1").hide(1000);
   });
  });
</script>
<div class="col-sm-12 col-lg-10" ng-controller="profile">
   <div class="text-center">
      <div class="col-sm-12">
        <div class="pull-right">
         <a id="profile-button"> <i class="fa fa-pencil fa-2x" style="cursor:pointer;color:#f7972f;"> </i> </a>
        </div>
        <div class="image-upload edit-picture">
            <label for="file-input">
                <i class="fa fa-camera fa-2x" style="cursor:pointer;color:#f7972f;"> </i>
            </label>
            <input id="file-input" type="file"/>
          </div>
          <img src="amit.jpg" class="img img-circle edit-image" style="width:150px;">
             <h3> Amit Singh Chauhan </h3>
        </div>
       <div class="col-sm-12"  id="1"> 
        <div class="col-sm-1"></div>
        <div class="col-sm-10" >
        This is detail Section
        </div>
        <div class="col-sm-1"></div>
    </div>
    <div class="col-sm-12"  id="2" style="display: none;"> 
        <div class="col-sm-1"></div>
        <div class="col-sm-10" >
        <form action="" novalidate="novalidate">
            <p><span class="wpcf7-form-control-wrap first-name"><input type="text" name="first-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="First Name"></span></p>
            <p><span class="wpcf7-form-control-wrap last-name"><input type="text" name="last-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Last Name"></span></p>
            <p><span class="wpcf7-form-control-wrap email-address"><input type="email" name="email-address" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="E-mail Address"></span></p>
            <div><span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Comment"></textarea></span></div>
            <div><input type="submit" value="Save Profile" class="wpcf7-form-control wpcf7-submit mkd-contact3"><span class="ajax-loader"></span></div>
        </form>
        </div>
        <div class="col-sm-1"></div>
    </div>
</div>

Solution

set ng-click for button , and ng-show for you want show or hide . example

<button ng-click ="clickme()">Click</button>
<div ng-show="show1">abc</div>
<div ng-show="show2">def</div>

in js file and you should put ng-app in html . <html ng-app="yourapp">

EDIT

  (function(){
            angular.module('yourapp',[])
                    .controller('yourcontroller',yourcontroller);
                    yourcontroller.$inject =['$scope','$timeout'];
                    function yourcontroller($scope,$timeout){
                        $scope.show1 = true;
                        $scope.show2=false;
                        $scope.clickme = function(){
    $timeout(function(){
    $scope.show1 =!$scope.show1;
    $scope.show2=!$scope.show2
    },1000);
    }
                    }
        })()

and in your config route

  .when("/profile", {
        templateUrl : "profile.php",
        controller : "profilecontroller"
}

Answered By – Akashii

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.