发表于: 2016-09-22 00:06:18

0 2111


今天完成的事:

1. 设置玩家人数输入框、滑动条、点击加减三者绑定同步。

 

明天计划的事:

1. 分配玩家身份。

 

今天遇到的问题:

1. 滑动调拖动之后立即点击加按钮,输入框内的数字会变成字符串拼接,解决办法有两个:
(1).$scope中加入对应的函数$scope.parseInt = parseInt;然后在html里将
ng-click="playersNum = playersNum + 1"改成
ng-click="playersNum = parseInt(playersNum) + 1 ".
(2). ng-click="playersNum = playersNum + 1"改成
       ng-click="playersNum = playersNum * 1 + 1"
第二种方法是利用js的变量的弱类型隐式转换,字符串减0,乘以1都会变成数字。

2. 设置输入玩家人数的的表单验证,小于6或大于20有警告提示,如果inputtypenumber的话,直接在input标签里加min=”6”,max=”20”,然后用

ng-show="myForm.playersNum.$error.min || myForm.playersNum.$error.max"就可以。但是这样有问题,滑动条的拖动输入框数值不变化,因为滑动条的值并不是数字。解决办法是自定义了一个表单验证指令,inputtype还是为text,这样输入框、滑动条、点击加减还是互相绑定同步的。

参考:http://www.angularjs.cn/A175

3. 解决2中的问题之后还有新问题,当手动输入一个超出范围的数字,有警告提示出现,这个时候如果点击加减或者拖到滑动条使输入框内数字进入正常范围,警告提示并不会消失,必须手动改到正常范围内才会消失。

 


收获:

1. 写设置玩家人数时一下就感觉到了AngularJS的方便强大,

angular.module('myApp',[]
    .controller('Shuffle',function($scope,$state){
        $scope.
        $scope.playersNum = 6;
});
});

就这么几行代码再加上html里输入框,滑动条,点击加减各绑定playersNum就实现了输入框,滑动条,点击加减三者同步,比JS里的取值再互相赋值方便太多了。

 

2. 构建一个ng表单

(1).确保form上标签有一个name属性,像下面的例子一样。最好再加一个novalidate=novalidate

(2).form中不能有action属性。提交交由ng-submit处理

(3).每个input一定要有ng-model,最好有一个name方便引用。然后用require或者ng-minlength之类才起作用

3. 自定义表单指令 http://damoqiongqiu.iteye.com/blog/1920993



返回列表 返回列表
评论

    分享到