使用AngularJS时解决的一些小问题

原创 2015年11月19日 14:43:47

1. 设置select的ng-model,但未显示初始选项

解决方法:在ng-options中加上track by语句。
如:

<select class="form-control" ng-model="customerInfo.staffInCharge" 
                        ng-options="staffInCharge.name for staffInCharge in staffs track by staffInCharge.id">
                        </select>

参考了http://gurustop.net/blog/2014/01/28/common-problems-and-solutions-when-using-select-elements-with-angular-js-ng-options-initial-selection/

2. 想要实时获得一组checkbox中选中的对象list

解决方法:使用开源的checklist-model。
它的使用例子和源码在这里:http://vitalets.github.io/checklist-model/
要使用它,只要将下载的checklist-model.js放在你的js目录下,引用这个js,并在你的app的依赖里添加即可使用了。例如:

var app = angular.module("app", ["checklist-model"]);

使用场景例如:

<tbody>
                <tr ng-repeat="staff in staffs">
                    <td><input type="checkbox" checklist-model="selects.staffs" checklist-value="staff" 
                        ng-change="checkOrUncheck(checked, staff)"/></td>
                    <td><span class="glyphicon glyphicon-user" ng-show="staff.role == 1"></span></td>
                    <td ng-bind="staff.name"></td>
                    <td ng-bind="staff.mobile"></td>
                    <td ng-bind="staff.email"></td>
                    <td ng-bind="staff.leader"></td>
                    <td ng-bind="staff.position"></td>
                    <td>
                        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editStaff" ng-click="editIt(staff)">
                            <span class="glyphicon glyphicon-pencil"></span>
                        </button>
                        <button class="btn btn-default btn-sm" ng-click="unassociateIt(staff)">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                    </td>
                </tr>
            </tbody>

3. 对ng-repeat中的radio使用ng-model时失败

解决方法:要在radio的ng-model中使用$parent,例如:

<tr ng-repeat="staff in staffs">
                        <td><input type="radio" ng-model="$parent.chosenInCharge" ng-value="staff" name="chosen"/></td>
                        <td><span class="label label-info">{{staff.name}}</span></td>
                        <td><span class="label label-info">{{staff.mobile}}</span></td>
                    </tr>

这样,我们就能在chosenInCharge里得到选中的staff了,那我们怎么在Controller里使用chosenInCharge呢,有个简单的方法,就是将它作为按钮点击事件的参数传递进controller里。例如:

<button type="button" class="btn btn-primary" ng-click="confirmInCharge(chosenInCharge)">确定</button>

参考了这个网页:http://stackoverflow.com/questions/17674899/angularjs-model-not-updating-on-selection-of-radio-button-generated-by-ng-repe

4. ui-view嵌套路由的使用

在HTML文件里:

<div class="container" style="width:100%;" ng-controller="staffOperationController">
        <ul id="staffTab" class="nav nav-tabs">
            <li class="active"><a ui-sref="staffAndDept.associated">已关联</a>
            </li>
            <li><a ui-sref="staffAndDept.noleader">未选上级</a>
            </li>
            <li><a ui-sref="staffAndDept.unassociated">未关联</a>
            </li>
            <li><a ui-sref="staffAndDept.deleted">已解除关联</a>
            </li>
        </ul>
        <div ui-view></div>
</div>
<script>
$('#staffTab li').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
})
</script>

我们定义了四个staffAndDept的子路由,它们将放在ui-view这个div里。紧接着的脚本作用是显示选择的tab。
接着,我们在app里这样使用:

SalesApp.config( function($stateProvider, $urlRouterProvider) {
    console.log("configuring router")
    $urlRouterProvider
        .when('/staffAndDept','/staffAndDept/associated')
        .when('','/staffAndDept/associated')
    $stateProvider          
        .state('staffAndDept', {
            url:'/staffAndDept',
            templateUrl: 'view/staffAndDept.html',
        })
        .state('staffAndDept.associated', {
            url:'/associated',
            templateUrl: 'view/associated.html',
        })
        .state('staffAndDept.noleader', {
            url:'/noleader',
            templateUrl: 'view/noleader.html',
        })
        .state('staffAndDept.unassociated', {
            url:'/unassociated',
            templateUrl: 'view/unassociated.html',
        })
        .state('staffAndDept.deleted', {
            url:'/deleted',
            templateUrl: 'view/deleted.html',
        })
}); 

在上面,我们使用$urlRouterProvider.when来指定一个默认的子路由,否则的话,当在父路由的时候,ui-view那个div就是空着的了。
参考了《AngularJS权威教程》第25章《AngularJS扩展精华》的25.3 ui-router的5 嵌套路由。

5. $http对params(当其中包含数组时) JSON化的问题

$http会自动对params里的数据进行JSON化,例如,我们定义:

$scope.oneMobile = {mobile:15021137613}
$http({
            url:'/svr/index.php?c=Mobile&a=UNamePart',
            method:'GET',
            params:{p2:$scope.oneMobile}
        }).success(function(response){  
        })

通过firefox的web控制台,我们可以看到它的url是:

http://sales.dev1.briwork.com/svr/index.php?c=Mobile&a=UNamePart&p2={"mobile":"15021137613"}

但是,当我们想要传递数组参数时,我们这样可能会这样做:

$scope.mobiles = [{mobile:15021137613},{mobile:12345678901}]
$http({
            url:'/svr/index.php?c=Mobile&a=UNamePart',
            method:'GET',
            params:{p2:$scope.mobiles}
        }).success(function(response){  
        })

但事实上,我们得到的请求的url是:

http://sales.dev1.briwork.com/svr/index.php?c=Mobile&a=UNamePart&p2={"mobile":"15021137613"}&p2={"mobile":"12345678901"}

而我希望的url应该是这样的:

http://sales.dev1.briwork.com/svr/index.php?c=Mobile&a=UNamePart&p2=[{"mobile":"15021137613"},{"mobile":"12345678901"}]

解决方法:既然$http的JSON化有问题,那我们就先将我们的数组JSON化,再作为参数传递进去。这里,我们就使用JSON.stringify()方法手动做JSON化。即:

$http({
            url:'/svr/index.php?c=Mobile&a=UNamePart',
            method:'GET',
            params:{p2:JSON.stringify($scope.mobiles)}
        }).success(function(response){  
        })

6. 需要使用angular.copy()而非直接赋值的一种情况

我在使用checklist-model时,写了常用的全选全不选,单选单不选的函数:

$scope.selects = {
            customers:[],
            numberOfSelectedCustomers:0
    }
    $scope.checkOrUncheckAll = function(checkAll) {
        if(checkAll){
            $scope.selects.customers = angular.copy($scope.customers)
            //如果这里写成
            //$scope.selects.customers = $scope.customers
            // 就会有一个bug,即在全选之后,在做单个的取消勾选时,在HTML页上,被取消勾选的那一行纪录就会消失(虽然刷新之后会再出现)
            $scope.selects.numberOfSelectedCustomers = $scope.customers.length
        } else {
            $scope.selects.customers = [] 
            $scope.selects.numberOfSelectedCustomers = 0
        }
    }
    $scope.checkOrUncheck = function(checked, customer) {
        var idx = $scope.selects.customers.indexOf(customer)
        if (idx >= 0 && !checked) {
            $scope.selects.customers.splice(idx, 1)
            --$scope.selects.numberOfSelectedCustomers
        }
        if (idx < 0 && checked) {
            $scope.selects.customers.push(customer)
            ++$scope.selects.numberOfSelectedCustomers
        }
        console.log($scope.selects.numberOfSelectedCustomers)
        console.log($scope.selects.customers)
    }

相应的HTML页是这样的:

<table class="table table-striped">
            <thead>
                <tr>
                    <th><input type="checkbox" ng-model="checkAll" ng-change="checkOrUncheckAll(checkAll)"/></th>
                    <th>客户名称</th>
                    <th>公司简称</th>
                    <th>负责人</th>
                    <th>客户等级</th>
                    <th>创建时间</th>
                    <th>操作2</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="customer in customers | startFrom:currentPage*pageSize | limitTo:pageSize">
                    <td><input type="checkbox" checklist-model="selects.customers" checklist-value="customer" 
                        ng-change="checkOrUncheck(checked, customer)"/></td>
                    <td ng-bind="customer.name"></td>
                    <td ng-bind="customer.sname"></td>
                    <td ng-bind="customer.staff"></td>
                    <td ng-bind="customer.level"></td>
                    <td ng-bind="customer.ct"></td>
                    <td>
                        <button class="btn btn-default btn-sm" ng-click="deleteIt(customer)"
                        data-toggle="modal" data-target="#deleteCustomer">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                    </td>
                </tr>
            </tbody>
            <button class="btn btn-default" ng-disabled="currentPage==0" ng-click="currentPage = currentPage-1">上一页</button>
            {{currentPage+1}}/{{numberOfPages()}}
            <button class="btn btn-default" ng-disabled="currentPage >= numberOfPages()-1" ng-click="currentPage = currentPage+1">下一页</button>
        </table>

不使用angular.copy()造成的bug如上面注释所说。值得一提的是,上面的html中还有分页的功能。
ng-repeat时列表过长,需要分页,参考了这个网页http://stackoverflow.com/questions/11581209/pagination-on-a-list-using-ng-repeat


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

angular 使用data-bs-datepicker时的一个小问题及解决

在一个angularJS的web前端的项目中,使用了angular-strap提供的UI子组件。 其中使用了datepicker组件。由于采用的css框架使用了bootstrap,又有semantic...

使用VS2010时遇到的一些小问题的解决方案(从各处搜罗总结的,不定期更新,向原作者致敬)

1. 报错 "visual studio 2010 遇到了异常,可能是由某个扩展导致的......"      原因貌似是安装某些软件之后,VS2010的注册表被改动了,所以需要更改注册表。(对...

angularjs karma安装小问题

http://blog.csdn.net/cqwshanfeng/article/details/24767045 npm install -g karma安装后输入 解决办法: ...

CSS常见小问题解决

自己对WTL使用中一个小问题的解决方法

文章来源:https://bbs.et8.net/bbs/archive/index.php/t-899260.html问题可见:http://topic.csdn.net/t/20051231/12...

java中常见大小问题的解决

  • 2012-04-25 22:06
  • 4.95MB
  • 下载

使用install4j打包java项目教程及一些小问题的解决

这两天由于需要把一个java项目打包成安装程序,所以查找学习了一些打包软件,现将自己亲身使用学习的一些经验总结如下,供大家参考,也希望大家少走一些弯路。网上确实有一大堆的教程,但亲测的时候难免还会遇到...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)