模板視圖和AngularJS之間沖突的解決方法
本文實(shí)例講述了模板視圖和AngularJS之間沖突的解決方法。分享給大家供大家參考,具體如下:
問(wèn)題:
在php的mvc視圖中,我們需要在加載的過(guò)程中
傳遞一些數(shù)據(jù)給模板:
如:
這里是某個(gè) controller
$data['users'] = {something from databases}; $this->load->view('home/index',$data);
這里是對(duì)應(yīng)的視圖
<div ng-controller="loadData"> <ul> <!--1. 初始化的時(shí)候我們需要使用下面這句--> <?php foreach(users as user):?> <li><?=$user->name?>:<?=$user->email?><li> <?php endforeach?> <!--2. 但是結(jié)束后 我們需要使用這句 通過(guò)ajax 更新 --> <li ng-repeat="user in users">{{user.name}}:{{user.email}}</li> </ul> </div>
那么現(xiàn)在問(wèn)題來(lái)了 如何處理 1 和 2 之間的矛盾?
第一種解決方案:
<script> var usersPrefetch = [ <?php foreach(users as user):?> {"name": "<?=$user->name?>", "email": "<?=$user->email?>"}, <?php endforeach?> ]; </script>
我們將 php傳過(guò)來(lái)的數(shù)據(jù)存儲(chǔ)在變量里,然后再通過(guò)
$scope對(duì)其進(jìn)行賦值,ok
第二種解決方案(推薦):
我們使用ng-if屬性解決我們的問(wèn)題,對(duì)于users未定義時(shí)調(diào)用php數(shù)據(jù)
ajax傳遞完成后使用我們的數(shù)據(jù)并定義 $scope.users
<ul ng-if="!users"> <?php foreach(users as user):?> <li><?=$user->name?>:<?=$user->email?><li> <?php endforeach?> </ul> <ul ng-if="users"> <li ng-repeat="user in users">{{user.name}}:{{user.email}}</li> </ul>
demo演示地址:https://jsfiddle.net/mser49aq/1/
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- AngularJS 使用ng-repeat報(bào)錯(cuò) [ngRepeat:dupes]
- AngularJS iframe跨域打開(kāi)內(nèi)容時(shí)報(bào)錯(cuò)誤的解決辦法
- AngularJS使用ng-inlude指令加載頁(yè)面失敗的原因與解決方法
- AngularJS中update兩次出現(xiàn)$promise屬性無(wú)法識(shí)別的解決方法
- AngularJS 中使用Swiper制作滾動(dòng)圖不能滑動(dòng)的解決方法
- AngularJS實(shí)現(xiàn)在ng-Options加上index的解決方法
- AngularJS ng-repeat數(shù)組有重復(fù)值的解決方法
- AngularJS在IE下取數(shù)據(jù)總是緩存問(wèn)題的解決方法
- AngularJS上拉加載問(wèn)題解決方法
- AngularJS在IE8的不支持的解決方法
- AngularJS報(bào)錯(cuò)$apply already in progress的解決方法分析
相關(guān)文章
詳解Angularjs 自定義指令中的數(shù)據(jù)綁定
這篇文章主要介紹了Angularjs 自定義指令中的數(shù)據(jù)綁定,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07angular學(xué)習(xí)之動(dòng)態(tài)創(chuàng)建表單的方法
這篇文章主要介紹了angular學(xué)習(xí)之動(dòng)態(tài)創(chuàng)建表單的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12angular安裝import?echarts?from‘echarts‘標(biāo)紅報(bào)錯(cuò)解決
這篇文章主要介紹了angular安裝import?echarts?from‘echarts‘標(biāo)紅報(bào)錯(cuò)解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10Angular2從搭建環(huán)境到開(kāi)發(fā)步驟詳解
本文的內(nèi)容主要是想幫助那些想學(xué)習(xí)Angular2的朋友們,因?yàn)槲易约涸谕鍭ngular2時(shí)碰到了不少坑,而且Angular2語(yǔ)法一直處于變化中,讓人很頭疼。不過(guò)也怪不了Anguar2,因?yàn)樗F(xiàn)在是處于并長(zhǎng)期處于alpha階段,下面就通過(guò)本文來(lái)學(xué)習(xí)Angular2的搭建環(huán)境和開(kāi)發(fā)吧。2016-10-10Angular實(shí)現(xiàn)的日程表功能【可添加及隱藏顯示內(nèi)容】
這篇文章主要介紹了Angular實(shí)現(xiàn)的日程表功能,帶有向日程表中添加內(nèi)容及隱藏顯示內(nèi)容的功能,涉及AngularJS事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12Angular ui.bootstrap.pagination分頁(yè)
這篇文章主要為大家詳細(xì)介紹了Angular ui.bootstrap.pagination 分頁(yè)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01angularJs中json數(shù)據(jù)轉(zhuǎn)換與本地存儲(chǔ)的實(shí)例
今天小編就為大家分享一篇angularJs中json數(shù)據(jù)轉(zhuǎn)換與本地存儲(chǔ)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10angularJs中datatable實(shí)現(xiàn)代碼
本篇文章主要介紹了angularJs中datatable實(shí)現(xiàn)代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06