2013-08-17 64 views
1

没有效果怎么可能删除与复位按钮UI元素在下面的代码Angular.js复位按钮NG-重复

<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> 

预先感谢您。

回答

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> 
+0

谢谢。 NG-控制器= “Ctrl” 键之上缺失<形式NG-INIT = “秀=真” NG-提交= “提交()” NG-控制器= “Ctrl” 键> – user977828

+0

@ user977828添加回来。我正在玩jsfiddle并将其提取到外包装。谢谢。 – zsong

1

这里的问题是,你有没有连接好控制器上的复位方法。它应该是这样的。

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

查看更新后的小提琴http://jsfiddle.net/cmyworld/WdVDh/1/

+0

谢谢。在$ scope.submit功能(),我不得不改变,以VAR RET = {},以避免加重旧的结果。 – user977828