Question

我正在使用角度1.6路由并在ng-view中显示我的路由页面数据，但在路由页面中我的jquery代码和隐藏和显示的角度代码不起作用请帮助我。我是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>

Answer 1

设置按钮单击按钮，然后显示要显示或隐藏的ng-show。示例

Display()

在js文件中你应该把ng-app放在html中。 <button ng-click ="clickme()">Click</button> <div ng-show="show1">abc</div> <div ng-show="show2">def</div>

编辑

<html ng-app="yourapp">

并在您的配置路线中

  (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);
    }
                    }
        })()

Answer 2

使用角度ng-show或ng-hide指令。

如果你想根据某个间隔/超时隐藏/显示你可以使用角度内置服务$ timeout，$ interval

$timeout(function () {    
    $scope.{model_name} = false;   
}, timeout_value);

jquery不工作或角度js nghide显示无法在角度路由页面中工作

2 个答案: