如何用angularjs製作一個完整的表格之三__在ng-repeat中使用ng-model

来源:http://www.cnblogs.com/weblv/archive/2016/01/20/5146988.html
-Advertisement-
Play Games

在ng-repeat中使用ng-model時會有許多問,有的人碰到無法獲取綁定的數據內容,有的人遇到改動綁定的數據內容時所有迴圈生成的內容一起改變。上面的問題我在開發時也遇到過,但是解決後我卻怎麼也還原不了那種情況了,只能先簡單介紹一下無法獲取的情景該如何解決。例如:html: ...


  在ng-repeat中使用ng-model時會有許多問,有的人碰到無法獲取綁定的數據內容,有的人遇到改動綁定的數據內容時所有迴圈生成的內容一起改變。上面的問題我在開發時也遇到過,但是解決後我卻怎麼也還原不了那種情況了,只能先簡單介紹一下無法獲取的情景該如何解決。

例如:

html:

<body>
<div ng-controller="selectController">
    <div ng-repeat="pop in citylist">
        <select ng-model="p">
            <option value="" style="display:none;">{{pop.pop}}</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="廣州">廣州</option>
        </select>
        <button ng-click="cs()">ceshi</button>
    </div>
</div>
</body>

js:

<script>
    var app = angular.module('app', []);
    app.controller('selectController', function ($scope) {
        $scope.citylist=[{id:1,pop:"北京"},{id:1,pop:"上海"},{id:1,pop:"廣州"}];
        $scope.cs=function(){
            console.log($scope.p);
        }
    })
</script>

很簡單的功能,想要在點擊更改按鈕時獲取select當前選中的數據內容,但是你會發現這樣寫只能得到undefined,此時有的人會提出可以將p賦予成為一個對象,通過key:value的方式來保存每一次的選擇

$scope.p={};

這樣確實沒問題,但是會有一個新的問題那就是只要改動了一項,那麼所有的內容都會跟著一起改變,那麼有沒有更好的方法呢?

只要一個小小的改動

html:

<button ng-click="cs(p)">ceshi</button>

js:

 $scope.cs=function(p){
            console.log(p);
        }

這隻是個簡單的例子,如大家在實際使用時發現有別的問題也可以在評論中留言。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 近期在使用bootstrap這個優秀的前端框架,這個框架非常強大,框架裡面有下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、麵包屑、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等,bootstrap都已經預先定義好了,當我們製作網頁上,只需直接調用裡面的css即可 bootstrap是一個響...
  • 在網上看到很多的JQuery跨域請求的文章,比較有意思。這裡我發表一個Servlet與JQuery配置實現跨域的代碼,供大家參考。不足之處請指教原理:JavaScript的Ajax不可以跨域,但是可以通過向本地的一個Servlet發出請求,由Servlet完成跨域。再把遠程的結構返回給客戶端。這樣A...
  • 只能輸入中文
  • css樣式表中四種屬性選擇器1> 簡易屬性tag[class]{ font-weight:bold }It will affect all tag with any class.e.g. or 2>精確屬性值a[href="http://www.cnblogs.cn"][title="textTi....
  • 一、Asp.net中的線程池設置 在Asp.net的服務處理中,每當伺服器收到一個請求,HttpRuntime將從HttpApplication池中獲取一個HttpApplication對象處理此請求,請求的處理過程將被排入線程池中,對於Asp.net來說,在Machine.config文件的pr....
  • 關於繼承好吧,說到底JS還是原型繼承的,而不是類繼承。所以在這個上面要經常用到prototype去繼承另一個對象。所有的構造器函數都約定命名為首字母大寫的形式,並且不以首字母大寫的形式拼寫任何其它的東西。當然一個更好的備選方案是根本就不用new。(太棒了,你說什麼就是什麼咯,我就當JS沒這個東西了)...
  • 一提到非同步交互大家就會說ajax,仿佛ajax這個技術已經成為了非同步交互的代名詞.那下麵將研究ajax的核心對象!利用ajax實現非同步交互無非4步:1.創建ajax核心對象2.與伺服器建立連接3.向伺服器發送請求4.接收伺服器響應的數據看似神秘的非同步交互當明確這4步後,也許在大家腦海裡已經有了初步的...
  • 由於本人也是邊學邊寫,因此整理的比較亂,下麵放出我例子的完整代碼,方便大家交流測試,如有問題歡迎評論首先,表格採用的是BootStrap樣式編輯的,主要使用的是angularjs,為了方便也有jQuery的方法,在測試時需自行引入bootstrap,angularjs和jq的文件。 整體代碼預覽:H...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...