项目中使用了angular-ui里的ui-select指令,地址https://github.com/angular-ui/ui-select

1. ng-model没有双向数据绑定

最开始没有看手册,直接仿照之前前辈写的ui-select,比如:

...
<ui-select ng-model="nameOld" theme="bootstrap" style="min-width: 300px;" name="oldTest" ng-change=change(nameOld)>
<ui-select-match placeholder="test old example">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="s in oldDatas | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="s.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
...

这里在ng-change的函数里比如传入形参赋值给$scope.nameOld,才能形成双向数据绑定的效果。

...
$scope.change = function (testOld){
console.log($scope.nameOld); //undefined
$scope.nameOld = testOld;
console.log($scope.nameOld); //hello
}
...  

后来在手册中发现可以使用selected来实现双向数据绑定

...
<ui-select ng-model="nameOld.selected" theme="bootstrap" style="min-width: 300px;" name="oldTest" ng-change=change()>
<ui-select-match placeholder="test old example">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="s in oldDatas | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="s.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
...  

对应的js中要先声明一个nameOld对象:

...
$scope.nameOld = {}; $scope.change = function (){ console.log($scope.nameOld.selected); //hello
}
...  

或者使用$parent.xxx,我理解的是ui-select插件创建了一个自己的作用域,需要使用$parent来和父作用域进行绑定;

...
<ui-select ng-model="$parent.nameOld" theme="bootstrap" style="min-width: 300px;" name="oldTest" ng-change=change()>
<ui-select-match placeholder="test old example">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="s in oldDatas | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="s.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select> 
... 

这时候js比较简单:

...
$scope.change = function (){ console.log($scope.nameOld); //hello
}
...

2. 下拉列表为多属性对象,想绑定的属性和展示的属性不是同一个

如果是一个对象数组,如下所示,这时候可以选择传入后台的数据是一个属性,还是一个数组元素

...
$scope.testArr = [
{
id: 1,
name: "a"
},
{
id: 2,
name: "b"
},
{
id: 3,
name: "c"
},
]; $scope.testChange = function () {
console.log($scope.testSelect);
console.log($scope.testSelect2);
}
...

对应的html如下:上为传入对象、下为传入属性值

...
/*select标签*/
<select ng-model="testSelect" ng-options="test.name for test in testArr" ng-change="testChange()"></select> <select ng-model="testSelect2" ng-options="test.name as test.name for test in testArr" ng-change="testChange()"></select> /*补充:ui-select指令里对象设置*/
/*单传属性*/
<ui-select ng-model="$parent.test" theme="bootstrap" style="min-width: 300px;" name="oldTest" ng-change=testChange()>
<ui-select-match placeholder="test old example">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="s.name as in testArr| propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="s.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select> 
/*传对象*/
<ui-select ng-model="$parent.test" theme="bootstrap" style="min-width: 300px;" name="oldTest" ng-change=testChange()>
<ui-select-match placeholder="test old example">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="s in testArr| propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="s.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
...

  

angularjs-ui插件ui-select和html的select注意事项及区别的更多相关文章

  1. Struts2 easy UI插件

    一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...

  2. 【UI插件】简单的日历插件(下)—— 学习MVC思想

    前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...

  3. 【UI插件】开发一个简单日历插件(上)

    前言 最近开始整理我们的单页应用框架了,虽然可能比不上MVVM模式的开发效率,也可能没有Backbone框架模块清晰,但是好歹也是自己开发出来 而且也用于了这么多频道的东西,如果没有总结,没有整理,没 ...

  4. Unreal Engine 4 Radiant UI 插件入门教程(二)

    本篇章前提要求:在UE4上安装了Radiant UI插件.如果没有安装,请找其它教程(或者是笔者的其它的教程,目前正在写). 本教程的目的:探讨如何从网页元素中调用蓝图中的内容: 第一步: 写一个网页 ...

  5. target-densitydpi=device-dpi会使其他ui插件布局变小

    target-densitydpi=device-dpi会使其他ui插件布局变小 东哥说:不用rem了,把meta改成这样<meta name="viewport" cont ...

  6. 基于AngularJS的Onsen UI --Onsen UI学习笔记

    AngularJS与Onsen UI的结合,Onsen UI应用程序实际上是一个AngularJS 1应用程序. <!doctype html><html lang="en ...

  7. amazeui-js插件-ui增强-日期组件如何使用(把实例做一下)

    amazeui-js插件-ui增强-日期组件如何使用(把实例做一下) 一.总结 一句话总结:需要jquery.js和amazeui.js一切才能使用 1.amazeui中的各种js效果要怎么才能使用? ...

  8. 转AngularJS路由插件

    AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析 标签: angular源码angularjs 2016-05-04 13:14 916人阅读 评论(0) ...

  9. 重大发现: windows下C++ UI库 UI神器-SOUI(转载)

    转载:http://www.cnblogs.com/setoutsoft/p/4996870.html 在Windows平台上开发客户端产品是一个非常痛苦的过程,特别是还要用C++的时候.尽管很多语言 ...

  10. 转: windows下C++ UI库 UI神器-SOUI

    转:http://www.cnblogs.com/setoutsoft/p/4996870.html 前言 在Windows平台上开发客户端产品是一个非常痛苦的过程,特别是还要用C++的时候.尽管很多 ...

随机推荐

  1. .Net MVC 导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) 通过MVC控制器导出导入Excel文件(可用于java SSH架构)

    .Net MVC  导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) [原文地址] 通过MVC控制器导出导入Excel文件(可用于java SSH架构)   public cl ...

  2. 【.NET】对文件的对称加密

    using System;using System.IO;using System.Security.Cryptography;namespace ConsoleApp_SymmetricalEncr ...

  3. 转载[POJ题型分类]

    北大ACM题分类 主流算法: 1.搜索 //回溯 2.DP(动态规划) 3.贪心 4.图论 //Dijkstra.最小生成树.网络流 5.数论 //解模线性方程 6.计算几何 //凸壳.同等安置矩形的 ...

  4. 【原】iOS 获取当前和 前后n天的日期

    原文:http://www.cnblogs.com/A--G/p/4759810.html 一.获取当前日期需要调用一个简单的方法:[NSDate date];//获取现在的日期 -(NSString ...

  5. 小委出发vijos-1572 jdoj-1572

    小委出发 题目大意:一个长度为n的字符串,由()[]{}组成.求最长的和谐字符串:我们对最长和谐字符串的定义就是每一个括号有一个性质相同的括号与之匹配,这两个括号中间要么为空,要么也是和谐的.几个连续 ...

  6. SecureCRT安装

    第一步:下载SecureCRT&SecureCRT激活工具 首先下载SecureCRT安装包和SecureCRT激活工具,SecureCRT&SecureCRT激活工具下载地址:链接: ...

  7. Excel阅读模式/聚光灯开发技术序列作品之三 高级自定义任务窗格开发原理简述—— 隐鹤

    Excel阅读模式/聚光灯开发技术序列作品之三 高级自定义任务窗格开发原理简述——    隐鹤 1. 引言 Excel任务窗格是一个可以用来存放各种常用命令的侧边窗口(准确的说是一个可以停靠在类名为x ...

  8. CentOS 7.6 安装 Weblogic 12

    http://download.oracle.com/otn/nt/middleware/12c/12213/fmw_12.2.1.3.0_wls_Disk1_1of1.zip java -jar f ...

  9. 手动实现property装饰器

    首先,property装饰器是通过数据描述符实现的.用法很简单,大家应该都知道,这里就不细说了. 这里主要分析一下property是如何通过描述符实现的. class Property: def __ ...

  10. VS Code 配置 C/C++ 环境(转)

      写作原因 微软的 VSCode 一直以来为人诟病的一个问题就是对于 C/C++ 工程的编译以及调试支持度有限,配置起来比较复杂,但是 vscode-cpptools 团队经过一段时间的 bug 修 ...