<del id="o6gkw"></del>

<strike id="o6gkw"></strike>

AngularJS: 使用ng-option生成下拉框并在controller調(diào)用

huaixiaoz 發(fā)布于2019-08-19 14:38 / 2695人閱讀

摘要：寫的時候碰到很多問題，因為剛開始用，寫法思路還是和寫相似，導致與在一個生成下拉框時花費了個小時才最終搞定。不自覺的用自己所熟悉的方式思考問題，付出了慘重的代價

實在是不能對jquery的ajax方法和基于頁面dom的各種取值、傳值方法滿意（雖然jquery已經(jīng)解救過我一次了），剛好手上這個項目用jquery的方法寫了一半，決定試試很久以前自學的angularJS，把現(xiàn)在項目中jquery得部分用angularJS重寫一遍。

寫的時候碰到很多問題，因為剛開始用，寫法思路還是和寫jquery相似，導致與在一個生成select option下拉框時花費了2個小時才最終搞定。

普通html select option, 需要該字段名稱name，選線id，選項label

jquery的取選項得做法

select_id = $("#data_select option:selected").val();

jqueryde的思路大概是上面這樣的，但是使用了angularJS后，著實讓我迷惑了

angularJS在select下使用ng-option 標簽生成選項實例

...

看見這個輸出，我發(fā)現(xiàn)沒法把id寫在option > value上

這豈不是無法獲取選項信息了？這不行，萬萬不行。結(jié)果開始了長時間的google，還是沒有解決辦法，就只能生成這種只有l(wèi)abel的option，這咋辦呢？難道要用ng-repeat生成option？

我甚至開始這么嘗試了，但是我的理智戰(zhàn)勝了偷懶的邪念，決定通過ng-click取model里的值看一看，結(jié)果console.log出來一看，發(fā)現(xiàn)自己一個多小時都傻x了。看看console里的結(jié)果：

Object {bubble_name: "ab", bubble_description: "b", x: Object, y: Object, series: Object}
    bubble_description: "b"
    bubble_name: "ab"
    series: Object
    x: Object
    y: Object
        date: "2014-03-11 09:03:22"
        description: ""
        disable_flag: "1"
        id: "9"
        name: "y3"
        position: "1"
        team_id: "8"
        type: "y"
    __proto__: Object
    __proto__: Object

angularJS根據(jù)model的名稱早就把每個相關的input的值自動放在Object中了

根本不在需要什么value=‘id’，只要把model的object從接口中取出來，放在html頁面上，、選中的option的全部數(shù)據(jù)angularJS自動就幫我取到controller中得點擊事件中去了。

不自覺的用自己所熟悉的方式思考問題，付出了慘重的代價

GPU云服務器云服務器 html生成下拉列表 js生成季度下拉框并在 js 調(diào)用生成二維碼

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/78047.html

angular 的 select 中 ng-options 設置默認值

摘要：的中設置默認值在開發(fā)的后臺系統(tǒng)中，經(jīng)常需要對后臺數(shù)據(jù)進行修改，而在修改數(shù)據(jù)的過程中，若頁面中有下拉框，需要讓其選中原來的數(shù)據(jù)，即中需要設置默認值。默認值設置方法在中使用綁定數(shù)據(jù)，在對應的中定義全局數(shù)據(jù)，并為其賦值，該值即為的默認值。 angular 的 select 中 ng-options 設置默認值在AngularJS 開發(fā)的后臺web系統(tǒng)中，經(jīng)常需要對后臺數(shù)據(jù)進行修改，而在修改...

omgdog 2019-08-20 12:29 評論0 收藏0
AngularJS簡述

流行框架簡介 angularjs是一款非常優(yōu)秀的前端高級JS框架，由谷歌團隊開發(fā)維護，能夠快速構(gòu)建單頁web應用，化繁為簡無論是angularjs還是jQuery都是用原生JS封裝的庫：對代碼進行封裝，調(diào)用封裝的方法，簡化操作傳統(tǒng)方式是用get方式獲取元素，然后點方法 jQuery庫實現(xiàn)了對獲取方式的封裝，對方法的封裝框架：提供代碼書寫規(guī)則，按照規(guī)則去寫代碼，框架會幫我們實現(xiàn)響應的功能...

Jason 2019-08-23 11:25 評論0 收藏0
AngularJs 功能（三）--數(shù)據(jù)綁定丶作用域

摘要：功能數(shù)據(jù)綁定的雙向數(shù)據(jù)綁定，一方面可以做到變化驅(qū)動了中元素變化，另一方面也可以做到元素的變化也會影響到。其次告訴，對頁面上的這個進行雙向數(shù)據(jù)綁定。第三告訴，在這個指令模版上顯示這個的數(shù)據(jù)。作用域是一個把一個元素連結(jié)到上的對象。功能數(shù)據(jù)綁定 AngularJS的雙向數(shù)據(jù)綁定，一方面可以做到model變化驅(qū)動了DOM中元素變化，另一方面也可以做到DOM元素的變化也會影響到Model。 ...

joywek 2019-08-22 13:54 評論0 收藏0
angularjs初識

摘要：總的來說，收獲很大。這里這里就以一些常用的標簽談談中的基礎知識。然后還有一個表示記錄的索引號，從開始。已經(jīng)用這個數(shù)組的值替他們分好了組了，是不是感覺很強大，還有很多強大的地方等著我們?nèi)W習，掌握它，還有更強大的等著我們。周三的時候跟著老師簡單的入門了angularjs，然后去圖書館找了一本《Angularjs實戰(zhàn)》來看了看，雖然這本書網(wǎng)上的評價不太高，但對于初學者的我來說還是不錯的，...

tanglijun 2019-08-23 11:49 評論0 收藏0
angularJS directive用法詳解

摘要：可選參數(shù)，布爾值或者對象默認值為，可能取值默認值。布爾值或者字符，默認值為這個配置選項可以讓我們提取包含在指令那個元素里面的內(nèi)容，再將它放置在指令模板的特定位置。前言最近學習了下angularjs指令的相關知識，也參考了前人的一些文章，在此總結(jié)下。歡迎批評指出錯誤的地方。 Angularjs指令定義的API showImg(https://segmentfault.com/img...

hlcc 2019-08-20 11:09 評論0 收藏0