【问题标题】:AngularJS ng-show and ng-hide does not change state after $http call [duplicate]AngularJS ng-show 和 ng-hide 在 $http 调用后不会改变状态[重复]
【发布时间】:2018-11-05 22:22:46
【问题描述】:

我想在AngularJS $http.get() 调用之后动态显示REST 响应数据。答案很好 数据绑定{{showOrderStateTrigger}}{{orderDetails}} 在调用显示true 和预期内容之后插入仅用于测试目的。但是ng-showng-hide 并没有意识到他们的情况发生了变化。我创建了ng-showng-hide 案例只是为了测试两种方法。检查变量undefined 或布尔变量状态。我尝试了$scope.$apply() 电话,但这只会让事情变得更糟。嵌套调用导致异常。谁能帮我解决这个问题?

        <script type="text/javascript">
            var myApp = angular.module( "myApp", [] );
            myApp.controller( "myController", function( $scope, $http ) 
            { 
              $scope.showOrderDetailsTrigger = false;
              $scope.showOrderDetails = function ( id )
              {
                  $http.get( "/WebApplication1/orders/" + id + ".json" )
                       .then( function ( response ) {
                           $scope.orderDetails = response.data;
                           $scope.showOrderDetailsTrigger = true; } );
              }
            } )
        </script>
    </head>

    <body ng-app="myApp" ng-controller="myController">
        <ul>
            <c:forEach var="order" items="${orders}">
                <li ng-click="showOrderDetails( ${order.id} )">${order.name}</li>
            </c:forEach>
        </ul>

        <div>{{showOrderDetailsTrigger}}</div>
        <div>{{orderDetails}}</div>

        <div ng-show="{{showOrderDetailsTrigger}}">
            <div>ID: {{orderDetails.id}}</div>
            <div>Name: {{orderDetails.name}}</div>
        </div>

        <div ng-hide="{{orderDetails === undefined}}">
            <div>ID: {{orderDetails.id}}</div>
            <div>Name: {{orderDetails.name}}</div>
        </div>

    </body>
</html>

【问题讨论】:

    标签: javascript angularjs


    【解决方案1】:

    许多指令,如 ng-showng-hideng-if 期望解析真假的表达式而不是插值表达式

    尝试改变

    ng-show="{{showOrderDetailsTrigger}}"
    

    ng-show="showOrderDetailsTrigger"
    

    更高级的条件是这样的:

    ng-if="somVar != 3 && foo=='bar'"
    

    【讨论】:

    • 呃。这是正确的。粗心的准确性导致的琐碎“错误输入”故障。非常感谢。
    • 不用担心。并不总是直观的。较新的 angular 2+ 更一致
    • @Bitman 在你的情况下,你真的应该考虑使用ng-if 而不是ng-showng-if 从视图中移除模板,ng-show 只隐藏它。您将 orderDetails 评估为未定义,这将导致错误
    • @DeblatonJean-Philippe 我不这么认为。第一次单击后,它应该出现并保持在该状态。它应该始终显示最后点击的列表项的内容。
    • @DeblatonJean-Philippe AngularJS 表达式是宽容。在 JavaScript 中,尝试评估未定义的属性会生成 ReferenceErrorTypeError。在 AngularJS 中,表达式评估对undefinednull 是宽容的。有关详细信息,请参阅AngularJS Developer Guide - AngularJS Expressions vs. JavaScript Expressions
    猜你喜欢
    • 2014-12-08
    • 2014-03-27
    • 2015-06-29
    • 2016-03-11
    • 2015-01-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-22
    相关资源
    最近更新 更多