Angularjs做表单筛选,如何提交筛选的参数后刷新界面载入新的数据

Angularjs做表单筛选,如何提交筛选的参数后刷新界面载入新的数据,第1张

寻常情况下是数据重新加载一次就行

不知道你这个表单数据是怎么绑定的,如果你是用ng-model绑定表单数据的,如果你有正确的执行赋值语句,你数据刷新的时候就会更新了

没代码这种问题基本就没有确切答案了吧

我们可以使用内置的$>

树控件可以作为一个DOM元素或属性。

复制脚本和CSS为你的项目添加一个脚本和链接到你的页面。

<script type="text/javascript" src="/angular-tree-controljs"></script>

<link rel="stylesheet" type="text/css" href="css/tree-controlcss">

<link rel="stylesheet" type="text/css" href="css/tree-control-attributecss">

添加一个依赖于您的应用程序模块

angularmodule('myApp', ['treeControl']);

将树元素添加到您的模板

<!-- as a Dom element -->

<treecontrol class="tree-classic"

tree-model="dataForTheTree"

options="treeOptions"

on-selection="showSelected(node)"

selected-node="node1">

employee: {{nodename}} age {{nodeage}}

</treecontrol>

<!-- as an attribute -->

<div treecontrol class="tree-classic"

tree-model="dataForTheTree"

options="treeOptions"

on-selection="showSelected(node)"

selected-node="node1">

employee: {{nodename}} age {{nodeage}}

</div>

并为树添加数据

$scopetreeOptions = {

nodeChildren: "children",

dirSelectable: true,

injectClasses: {

ul: "a1",

li: "a2",

liSelected: "a7",

iExpanded: "a3",

iCollapsed: "a4",

iLeaf: "a5",

label: "a6",

labelSelected: "a8"

}

}

$scopedataForTheTree =

[

{ "name" : "Joe", "age" : "21", "children" : [

{ "name" : "Smith", "age" : "42", "children" : [] },

{ "name" : "Gary", "age" : "21", "children" : [

{ "name" : "Jenifer", "age" : "23", "children" : [

{ "name" : "Dani", "age" : "32", "children" : [] },

{ "name" : "Max", "age" : "34", "children" : [] }

]}

]}

]},

{ "name" : "Albert", "age" : "33", "children" : [] },

{ "name" : "Ron", "age" : "29", "children" : [] }

];

样式

树控件呈现以下的DOM结构

<treecontrol class="tree-classic">

<ul>

<li class="tree-expanded">

<i class="tree-branch-head"></i>

<i class="tree-leaf-head"></i>

<div class="tree-label">

label - expanded angular template is in the treecontrol element

</div>

<treeitem>

<ul>

<li class="tree-leaf">

<i class="tree-branch-head"></i>

<i class="tree-leaf-head"></i>

<div class="tree-label tree-selected">

label - expanded angular template is in the treecontrol element

</div>

</li>

<li class="tree-leaf">

<i class="tree-branch-head"></i>

<i class="tree-leaf-head"></i>

<div class="tree-label">

label - expanded angular template is in the treecontrol element

</div>

</li>

</ul>

</treeitem>

</li>

</ul>

</treecontrol>

CSS类用于内置样式的树控件。附加的类可以使用optionsinjectclasses成员加入(见上文)

树扩展,树倒塌,树叶放在“UL”元素

树枝头,树的叶头-被放置在'i'元素。我们使用这些类来放置树的图标

树选择放置于标签div

使用Angularjs获取数组中的值并传值到html页面中显示出来

js页面的数组如下:

var freetrial = [{

goodsid:"xy0001",

imgurl:"img/178jpg",

goodstitle:"好娃娃牌安全椅",

quantity:"10份",

cost:896,

linkt:"sdcx()",

status:0},

{

goodsid:"xy0002",

imgurl:"img/178jpg",

goodstitle:"时尚包",

quantity:"10份",

cost:298,

status:1},

{

goodsid:"xy0003",

imgurl:"img/178jpg",

goodstitle:"好娃娃",

quantity:"10份",

cost:896,

linkt:"sdcx()",

status:0}

];

html页面:

<div class=“xsy” id="xy0001">

<a href="{{sdcx()}}"><img src="{{imgurl}}"></a>

<h1>{{goodstitle}}</h1>

</div>

需要判断的是如果div的id==数组里的goodsid且status=0,就把数组的值传到页面对应的地方。要使用Angularjs来实现,不能使用jQuery。求大神指点要怎么做,如果我的思路不对,有没有其他更好的方法?用来保存数据的数组肯定是需要的,jQuery也不能用。

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<!DOCTYPE html><html ng-app="test"><head> <title>Freetrial</title></head><body ng-controller="FreetrialController"> <div class="xsy" ng-repeat="item in freetrial" ng-if="use('xy0001', 0, item)" id="xy0001"> <a href="{{itemsdcx()}}"><img src="">{{itemimgurl}}</a> <h1>{{itemgoodstitle}} </h1> </div> <script type="text/javascript" src="/lib/angularminjs"></script> <script> var app = angularmodule('test', []); appcontroller('FreetrialController', function($scope){ $scopeuse = function(id, status, item){ var flag = false; if(!item || (id === itemgoodsid && status === itemstatus)){ flag = true; } return flag; } $scopefreetrial = [ { goodsid:"xy0001", imgurl:"img/178jpg", goodstitle:"好娃娃牌安全椅", quantity:"10份", cost:896, linkt:"sdcx()", status:0 }, { goodsid:"xy0002", imgurl:"img/178jpg", goodstitle:"时尚包", quantity:"10份", cost:298, status:1 }, { goodsid:"xy0003", imgurl:"img/178jpg", goodstitle:"好娃娃", quantity:"10份", cost:896, linkt:"sdcx()", status:0 } ] }); </script></body></html><!--还可以从数据上着手, 先把数据按照需求重组,再输出到视图-->

追问:请问如果我需要在点击这个a标签时,把div的id post出去,让另外一个js页面接收到,然后在数组匹配符合的数组数据输出到html页面。这个要怎么实现?

AngularJs ng-if的用法

123456789101112131415 <!DOCTYPE html><html ng-app><head> <title>checked</title></head><body> <input type="checkbox" ng-model="checked">点击试试 <div ng-if="checked">content</div> <script type="text/javascript" src="/angularminjs"></script> </body></html>

angularjs中关于checkbox的问题

烦恼

我想设置当checkbox选中之后执行一段逻辑代码,我写的是if($scope(checkbox1)checked){`````}但是不行我想问的是这个if逻辑应该怎么写怎么表达他被选中了???

123456789101112131415161718192021222324 <!DOCTYPE html><html ng-app="test"><head> <title>angularJs-checkbox</title></head><body> <div ng-controller="CheckCtrl"> <input type="checkbox" ng-model="chk" ng-click="check(chk)"/> </div> <script type="text/javascript" src="/js/angularminjs"></script> <script type="text/javascript"> //直接判断checkbox的model即可 var test = angularmodule('test', []); testcontroller('CheckCtrl', function($scope){ //设置checkbox默认不选中 $scopechk = false; $scopecheck = function(val){ !val alert('选中') : alert('未选中'); } }) </script></body> </html>

在获取到数据之后apply一下,强制刷新。前几天我也遇到了,不知道为啥。。。

$scopeweather = responseDatadata;

$scope$apply();

===============================补充====================================

这两天研究了一下,貌似是用angularjs以外的promise来进行数据请求,angularjs是监听不到的。你的代码中用的是$ajax(),所以需要强制刷新一下。如果你用$>

所谓PWA是 Progressive Web App 的缩写,中文意思是 “ 渐进式 Web 应用 ”,PWA有与传统的Web应用相比有什么优势?在《PWA开发实战》一书中列出了以下几点:

从渐进学习的角度,本文将初步探索使用 Angular 框架来实现 PWA 的“ 无连接状态下的可用性

1、安装脚手架工具

2、创建项目,命名为 gotham-hotel 即《PWA开发实战》中的 哥谭帝国酒店

3、初始化配置, 添加样式库,本项目选用 NG-ZORRO

4、安装后端数据模拟工具 json-server

5、修改packagejson文件,添加json-server的启动指令

6、添加模拟数据:在packagejson 同级目录添加 datajs 文件,文件中的 rooms 数组 模拟了 酒店的房型

1、创建房型 数据接口

接口定义如下:

2、创建 房型 数据获取服务

3、创建房型列表组件, 用于展示房型信息

修改 roomscomponentts 文件如下:

修改roomscomponenthtml文件如下:

4、创建 home 组件

修改 homecomponentts 文件如下

5、设置路由

在 appmodulets 文件内加入如下路由信息

修改appcomponentts 文件如下 (注意,要自己把logo和 room1、2、3、4放到assets目录下)

1、启动模拟后端数据

2、启动angular服务

如果一切没有问题的话,在浏览器中可以看到

点击蓝色的按钮,可以进入房型列表页面

到这里为止,一切都还只是一个常规的Web应用,让我们来模拟一下断线会出现什么情况

在 Chrome 中:

1、选择 Tools > Developer Tools (从右上角的 Chrome 菜单)。

2、进入 Network 页。

3、勾选Offline 复选框。

刷新页面,小恐龙就会出现了

做足了前戏,才轮到我们的主角上场了

1、安装pwa

2、配置缓存信息

我们会发现项目的src目录下多出了一个 ngsw-configjson 文件,该文件用于 定义pwa要缓存的信息 ,我们可以根据项目的需要进行修改,详细信息可参见 angular官网 Service Worker 配置 。

我们这个demo暂时只配置房型列表的api信息,在 ngsw-configjson 文件中添加内容如下:

表示对后端api中的rooms路径的请求进行缓存

3、重新构建项目

构建完成后,会在dist目录下多出一个对应项目名的文件夹

4、安装独立的 >

以上就是关于Angularjs做表单筛选,如何提交筛选的参数后刷新界面载入新的数据全部的内容,包括:Angularjs做表单筛选,如何提交筛选的参数后刷新界面载入新的数据、angular js中 http.get方法怎么用、如何设置angular树默认为打开等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9630840.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-30
下一篇2023-04-30

发表评论

登录后才能评论

评论列表(0条)

    保存