欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

模板視圖和AngularJS之間沖突的解決方法

 更新時(shí)間：2016年11月22日 11:00:09   作者：栁羅風(fēng)塵  
這篇文章主要介紹了模板視圖和AngularJS之間沖突的解決方法,結(jié)合實(shí)例形式分析了AngularJS模板視圖沖突的原因并給出了2種解決方法供大家參考使用,需要的朋友可以參考下

本文實(shí)例講述了模板視圖和AngularJS之間沖突的解決方法。分享給大家供大家參考，具體如下：

問題：

在php的mvc視圖中，我們需要在加載的過程中

傳遞一些數(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é)束后 我們需要使用這句 通過ajax 更新 -->
    <li ng-repeat="user in users">{{user.name}}:{{user.email}}</li>
  </ul>
</div>

那么現(xiàn)在問題來(lái)了 如何處理 1 和 2 之間的矛盾？

第一種解決方案：

<script>
 var usersPrefetch = [
  <?php foreach(users as user):?>
  {"name": "<?=$user->name?>", "email": "<?=$user->email?>"},
  <?php endforeach?>
 ];
</script>

我們將 php傳過來(lái)的數(shù)據(jù)存儲(chǔ)在變量里，然后再通過
$scope對(duì)其進(jìn)行賦值，ok

第二種解決方案(推薦)：

我們使用ng-if屬性解決我們的問題，對(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ì)有所幫助。

相關(guān)文章

  • 詳解Angularjs 自定義指令中的數(shù)據(jù)綁定

    詳解Angularjs 自定義指令中的數(shù)據(jù)綁定

    這篇文章主要介紹了Angularjs 自定義指令中的數(shù)據(jù)綁定，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2018-07-07
  • angular學(xué)習(xí)之動(dòng)態(tài)創(chuàng)建表單的方法

    angular學(xué)習(xí)之動(dòng)態(tài)創(chuàng)建表單的方法

    這篇文章主要介紹了angular學(xué)習(xí)之動(dòng)態(tài)創(chuàng)建表單的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2018-12-12
  • angular安裝import?echarts?from‘echarts‘標(biāo)紅報(bào)錯(cuò)解決

    angular安裝import?echarts?from‘echarts‘標(biāo)紅報(bào)錯(cuò)解決

    這篇文章主要介紹了angular安裝import?echarts?from‘echarts‘標(biāo)紅報(bào)錯(cuò)解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-10-10
  • angularJS提交表單（form）

    angularJS提交表單（form）

    這篇文章主要介紹了angularJS提交表單（form）的方法和示例,需要的朋友可以參考下
    2015-02-02
  • Angular2從搭建環(huán)境到開發(fā)步驟詳解

    Angular2從搭建環(huán)境到開發(fā)步驟詳解

    本文的內(nèi)容主要是想幫助那些想學(xué)習(xí)Angular2的朋友們，因?yàn)槲易约涸谕鍭ngular2時(shí)碰到了不少坑，而且Angular2語(yǔ)法一直處于變化中，讓人很頭疼。不過也怪不了Anguar2，因?yàn)樗F(xiàn)在是處于并長(zhǎng)期處于alpha階段，下面就通過本文來(lái)學(xué)習(xí)Angular2的搭建環(huán)境和開發(fā)吧。
    2016-10-10
  • 深入探究angular2 UI組件之primeNG用法

    深入探究angular2 UI組件之primeNG用法

    本篇文章主要介紹了深入探究angular2 UI組件之primeNG用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2017-07-07
  • Angular實(shí)現(xiàn)的日程表功能【可添加及隱藏顯示內(nèi)容】

    Angular實(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-12
  • Angular ui.bootstrap.pagination分頁(yè)

    Angular ui.bootstrap.pagination分頁(yè)

    這篇文章主要為大家詳細(xì)介紹了Angular ui.bootstrap.pagination 分頁(yè)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-01-01
  • angularJs中json數(shù)據(jù)轉(zhuǎn)換與本地存儲(chǔ)的實(shí)例

    angularJs中json數(shù)據(jù)轉(zhuǎn)換與本地存儲(chǔ)的實(shí)例

    今天小編就為大家分享一篇angularJs中json數(shù)據(jù)轉(zhuǎn)換與本地存儲(chǔ)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2018-10-10
  • angularJs中datatable實(shí)現(xiàn)代碼

    angularJs中datatable實(shí)現(xiàn)代碼

    本篇文章主要介紹了angularJs中datatable實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2017-06-06

最新評(píng)論