Question

如何使用以下代码中的重置按钮删除ul元素

<html ng-app>

    <head>
        <script src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script>
    </head>

    <body>
        <form ng-submit="submit()" ng-controller="Ctrl">Enter text and hit enter:
            <input type="text" ng-model="text" name="text" />
            <input type="submit" id="submit" value="Submit" />
            <input type="reset" id="reset" value="Reset" />
            <ul>
                <li ng-repeat="(key,val) in ret">{{key}} = {{val}}</li>
            </ul>
        </form>
        <script>
            function Ctrl($scope) {
                $scope.ret = {}

                $scope.reset = function() {
                    $scope.ret = {}
                }

                $scope.submit = function() {
                    var str = $scope.text;
                    var ret = $scope.ret
                    for (x = 0, length = str.length; x < length; x++) {
                        var l = str.charAt(x);
                        ret[l] = (isNaN(ret[l]) ? 1 : ret[l] + 1);
                    }
                    $scope.ret = ret
                }
            }
        </script>
    </body>

</html>

提前谢谢。

Answer 1

您可以使用ng-show隐藏它，而不是将其从DOM中删除。

<form ng-init="show=true" ng-controller="Ctrl" ng-submit="submit()">Enter text and hit enter:
    <input type="text" ng-model="text" name="text" />
    <input type="submit" id="submit" value="Submit" />
    <input type="reset" id="reset" value="Reset" ng-click="show=false" />
    <ul ng-show="show">
        <li ng-repeat="(key,val) in ret">{{key}} = {{val}}</li>
    </ul>
</form>

Answer 2

这里的问题是您没有在控制器上连接重置方法。它应该是这样的。

<input type="reset" id="reset" value="Reset" ng-click='reset()'/>

请参阅更新的小提琴http://jsfiddle.net/cmyworld/WdVDh/1/

Angular.js重置按钮对ng-repeat没有影响

2 个答案: