2013-02-15 34 views
6

हमने अपने ऐप में कुछ ड्रॉप-डाउन का है साथ चुनिंदा कि हम कर सकते हैं नहीं उपयोग एनजी-विकल्पों के साथ क्योंकि हम जो साथ संभव नहीं है < विकल्पों > टैग पर ही शीर्षक विशेषता निर्धारित करने की आवश्यकताएनजी-विकल्पकोणीय जे एस मैनुअल विकल्पों

कारण है कि हम जरूरत है क्योंकि आईई < 9 चॉप बंद मूल्यों कि लंबे समय के लिए होते हैं और वे शीर्षक के साथ ही दिखाई दे रहे हैं

(तत्व की हॉवर पर दिखाई देता है) शीर्षक है अब, देखने के लिए मुद्दा मैं निम्नलिखित जेएस पहेली को देख रहा हूँ।

http://jsfiddle.net/nstuart/nF7eJ/ (एचटीएमएल बिट)

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <select ng-model="params.value"> 
     <option value="">Any</option> 
     <option ng-repeat="v in options" value="{{v.value}}" title="{{v.name}}" ng-selected="{{v.value == params.value}}">{{v.name}}</option> 
    </select> 
    <p>{{params.value}}</p> 
</div> 

आदर्श रूप में चयन 'test3' का चयन किया है, लेकिन आप देख सकते हैं यह एक खाली विकल्प के बजाय सेट हो जाता है। मैं समझता हूं कि यह इस तथ्य से है कि एनजी-विकल्प में एनजी-मॉडल का मूल्य मौजूद नहीं है, लेकिन ऐसा इसलिए है क्योंकि मैंने एक को परिभाषित नहीं किया है!

इस काम की तरह कुछ पाने के बारे में कोई विचार? शायद एनजी विकल्पों द्वारा उत्पन्न विकल्पों में शीर्षक जोड़ने में भी सक्षम हो ताकि हम इसके बजाय इसका उपयोग कर सकें? नीचे दिए गए जवाब में वर्णित के रूप में http://jsfiddle.net/nstuart/nBphn/2/:

संपादित

पर बेला अपडेट किया गया।

उत्तर

16

वास्तव में, बस में अभिव्यक्ति से घुंघराले ब्रेसिज़ हटाने एनजी से चयनित और यह काम करेगा:

<option ng-repeat="v in options" 
     value="{{v.value}}" 
     title="{{v.name}}" 
     ng-selected="v.value == params.value">{{v.name}} 
</option> 

fiddle

+1

गहहह! धन्यवाद, वह था। मैंने पहेली को अद्यतन किया है, इसलिए यह काम करता है। यह अभी भी शीर्ष पर अजीब खाली

+0

+1 यह भी मेरी मदद करता है :) –

1
<option ng-repeat="v in options" value="{{v.value}}" title="{{v.name}}" 
     ng-selected="checkOption(v.value)">{{v.name}}</option> 

$scope.checkOption = function(value){ 
    return($scope.params.value == value); 
} 

Fiddle

[अद्यतन] मूल्य चर पारित करना भूल गए। अद्यतन पहेली और जवाब।

+0

मेरा उत्तर पर एक नजर डालें। 'ng चयनित 'अभिव्यक्ति को इसके तर्क के रूप में लेता है। दस्तावेज़ पृष्ठ पर वह टिप्पणी गलत है। आपके उत्तर में 'चेकऑप्शन (v.value) 'एक स्ट्रिंग है जिसका मूल्यांकन कोणीय द्वारा वर्तमान दायरे में अभिव्यक्ति के रूप में किया जाता है। तो अभिव्यक्ति बस ठीक है। – satchmorun

+0

@satchmorun मैं अब देखता हूं, धन्यवाद। मुझे अपना जवाब अपडेट किया गया है। –

+0

स्वीकृत सैचमोर्न का जवाब क्योंकि यह अधिक तकनीकी रूप से सही है। आप बस {{}} को छोड़ दें और यह एक फ़ंक्शन या नियमित == चेक लेगा। धन्यवाद हालांकि बेन, सही दिशा में था और इसे भी ठीक कर दिया होगा। –

0

मेरे कोड में, मैं फिर से गणना एनजी-परिवर्तन पर चयन title = "changeItem()"

एचटीएमएल

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <select ng-options="item.id as item.title for item in items" 
      ng-model="selectedId" ng-change="changeItem()" title="{{myTitle}}"> 
     <option value="" disabled selected style="display: none;">Select Item</option>     
    </select> 
    <div> 
     {{selectedId}}   
    </div> 
    <div> 
     {{myTitle}}   
    </div> 
</div> 

app.js

angular.module('myApp', []); 

function MyCtrl($scope) { 

    $scope.items = [{ 
     id: 1, 
     title: "Icebox" 
    }, { 
     id: 2, 
     title: "Summer" 
    }, { 
     id: 3, 
     title: "Milestone" 
    }]; 

    $scope.changeItem = function() { 
     $scope.myTitle = undefined; 
     for(var i=0; i<$scope.items.length; i++){ 
      if($scope.items[i].id == $scope.selectedId){ 
       $scope.myTitle = $scope.items[i].title;  
      } 
     }  
    }  
} 

Fiddle

1

मैनुअल विकल्पों के लिए, आप केवल ng-model निर्देश का उपयोग करने की जरूरत है। यह ng-model निर्देश चयनित विकल्प के लिए दो तरह का डेटा बाध्यकारी देता है।

jsfiddle: http://jsfiddle.net/rpaul/1p9b5et8/1/

<body ng-app ng-controller="AppCtrl"> 
<select ng-model="selectedFruit" > 
    <option value ='1'> Apple</option> 
    <option value ='2'> Orange</option> 
</select> 
    Selected value is {{selectedFruit}} 
</body> 


function AppCtrl($scope) {  

     $scope.selectedFruit = '1'; 
} 
संबंधित मुद्दे