1

如何在以下代码中使用重置按钮删除 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>

先感谢您。

4

2 回答 2

3

您可以使用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>
于 2013-08-17T04:20:32.660 回答
1

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

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

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

于 2013-08-17T04:19:27.893 回答