Angular JS错误状态未显示

Question

I have a Bootstrap 3 page with 3 panels and a numeric stepper to control the height of the panels. This part works fine, but I also am trying to add and error state message if the stepper goes to the minimum or over a value. The stepper value is bound to the panels' height and works as expected. The error does not display, though.

The basic angular part of the code is here:

<form class="form-inline" name="panel" no-validate>
        <div class="form-group" ng-class="{'has-error': panel.height.$error.min || panel.height.$error.max}" >
            <span>Change height:&nbsp;</span>
            <input class="form-control" name="height" style="display: inline-block; width: 70px;" type="number" min="150" max="400" step="25" ng-model="panelHeight" ng-init="panelHeight=200"  />
            <span ng-show="panel.height.$error.min">&nbsp;Height must be a minimum of 150.</span>
            <span ng-show="panel.height.$error.max">&nbsp;Height must be a maximum of 400.</span>
        </div>
    </form>

And a fiddle with the whole working code is here: http://jsfiddle.net/yLUaA/

NOTE Apparently I am having issues removing just the right amount of code to make the fiddle work; rest assured the panel sizing is working locally. Just not the error.

Answer 1

You're missing ng-app from the fiddle so that's most likely the cause in your local project. ng-app should be assigned to the root element of your page, see ng-app documentation .

Working demo here: http://jsfiddle.net/yLUaA/3/