项目中使用了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. c++字节数组转换为整型

    http://bbs.csdn.net/topics/360132089 BYTE data[4]={0x00,0x00,0xe6,0x00};//第一句UINT a11=*(UINT*)data;/ ...

  2. python网络编程-动态导入和断言

    一:动态导入importlib 在程序运行的过程中,根据变量或者配置动态的决定导入哪个模块,可以使用模块importlib importlib使用示例 二:断言assert 如果接下来的程序依赖于前面 ...

  3. js函数前加分号和感叹号是什么意思?有什么用?

    一般看JQuery插件里的写法是这样的 (function($) { //... })(jQuery); 今天看到bootstrap的javascript组件是这样写的 !function( $ ){ ...

  4. 夜神模拟器调试android studio项目

    这几天为了android studio也是醉了,先是R文件丢失忙活一下午,各种百度谷歌,最后终于解决这个小问题,没想到在启动avd这个问题上更是棘手,网上的方法试了,主要有三种,上篇博文http:// ...

  5. 利用Requests库写爬虫

    基本Get请求: #-*- coding:utf-8 -*- import requests url = 'http://www.baidu.com' r = requests.get(url) pr ...

  6. 20165203 第6周《Java程序设计》学习

    教材学习内容总结 第八章 String类 分清常量池和变量池. String类的常用方法 public int length() public boolean eauals(String s) pub ...

  7. bms_output.put_line使用方法

    https://blog.csdn.net/sxww321/article/details/4020300

  8. CCF CSP 201709-1 打酱油

    CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201709-1 打酱油 问题描述 小明带着N元钱去买酱油.酱油10块钱一瓶,商家进行促销,每买 ...

  9. bzoj 3926 转换+广义后缀自动机

    思路:重点在于叶子节点只有20个,我们把叶子节点提到根,把20个trie图插入后缀自动机,然后就是算有多少个本质不同的字串. #include<bits/stdc++.h> #define ...

  10. 基于 Laravel 开发博客应用系列 —— 从测试开始(一):创建项目和PHPUnit

    1.创建博客项目 我们将遵循上一节提到的六步创建一个新 Laravel 5.1 项目的步骤,创建本节要用到的博客项目 —— blog. 首先,在本地主机安装应用骨架: nonfu@ubuntu:~/C ...