角范围内不影响吴秀如预期 [英] Angular scope not affecting ng-show as expected

问题描述

我有一个关于Angular.js范围的问题。

I have a question about Angular.js scope.

首先，我很新的角度和我已阅读范围文档，并试图了解它尽我所能。我有一种感觉，我的问题是与此类似：
NG-节目并不如预期结合

Firstly I am very new to Angular and I have read the scope documentation and tried to understand it the best I can. I have a feeling my question is similar to this: ng-show not binding as expected

不过我的例子在本质上是简单的，我还是不明白，我错过了什么。

However my example is simpler in nature and I still don't understand what I am missing.

我的HTML很简单，我有一个控制器，它包装的一切：​​

My html is very simple, I have a controller that wraps everything:

<div ng-controller="ApplicationFormController"></div>

这里面我有几个部分：

Inside this I have sections:

<div ng-controller="ApplicationFormController">
<button ng-click="previous()">previous</button>
<button ng-click="next()">previous</button>
<p> You are on section #1 </p>
    <div class="section1" ng-show="{{ section.id == 1 }}"> Section 1 </div>
    <div class="section2" ng-show="{{ section.id == 2 }}"> Section 2 </div>
    <div class="section3" ng-show="{{ section.id == 3 }}"> Section 3 </div>
</div>

正如你可以看到我打算来显示这一部分，当它被应用到控制器。

As you can see I intend to show the section when it is applied to the controller.

我的应用程序逻辑如下：

My application logic is as follows:

app.controller('ApplicationFormController', ['$scope', function($scope) {
    $scope.sections = sections;
    $scope.section = $scope.sections[0];

    $scope.next = function() {
        var index = $scope.sections.map(function(x){
            return x.id;
        }).indexOf($scope.section.id);

        $scope.section = $scope.sections[index+1];
    };
    $scope.previous = function() {
        var index = $scope.sections.map(function(x){
            return x.id;
        }).indexOf($scope.section.id);

        $scope.section = $scope.sections[index-1];
    };

}]);

切片阵列如下：

var sections = [
    {
        id: 1,
        name: 'Section 1',
        steps: [
            {
                id: 1,
                name: 'Step 1',
            },
            {
                id: 2,
                name: 'Step 2',
            },
            {
                id: 3,
                name: 'Step 3',
            },
        ]
    },
    {
        id: 2,
        name: 'Section 2',
        steps: [
            {
                id: 1,
                name: 'Step 1',
            },
            {
                id: 2,
                name: 'Step 2',
            },
            {
                id: 3,
                name: 'Step 3',
            },
        ]
    }
];

很简单的东西。

所以，问题出在显示和隐藏。

So the issue lies in the showing and hiding.

当我触发在下次运行或previous事件中，我可以看到这一点，因为＆LT; P＆GT; 标签的更新与适当的ID例如：如果我preSS旁边的p标签将更新，以反映：

When I trigger the next or previous event it runs, I can see this because the <p> tag updates with the appropriate id eg: if I press next the p tag will update to reflect:

＆LT; P＆gt;您是一节＃2'; / P＆GT; 如预期

奇怪的是，当前显示不更新部分。第一节在这种情况下将保持可见，而第二部分将留下隐患。

The odd thing is the section that is currently showing doesn't update. Section one in this case will stay visible while section two will stay hidden.

什么是$ P $无法更新，以反映该控制器的当前状态pventing的DOM。

What is preventing the DOM from updating to reflect the current state of the controller.

推荐答案

这是因为的 NG-节目 需要一个的前$ p后的，相对= nofollow的>这手表内部设定。但是，你正在使用插值提供前pression（布尔字符串）的值（ {{）。所以，看以后从未执行，因为范围。$腕表（attr.ngShow，...）将评估范围['真/假'] ，而不是实际的前pression你打算。

That is because ng-show takes an expression upon which a watch is set internally. But you are providing value of expression (boolean string) by using interpolation ({{). So watch never executes afterwards since scope.$watch(attr.ngShow,...) will be evaluating scope['true/false'] instead of actual expression you intended to.

修改

   <div class="section1" ng-show="{{ section.id == 1 }}"> Section 1 </div>

到

   <div class="section1" ng-show="section.id == 1"> Section 1 </div>

等别人了。

这篇关于角范围内不影响吴秀如预期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！