নির্বাচনের উপাদানগুলির ডিফল্ট মান সেট করতে এনজি-বিকল্পটি কীভাবে ব্যবহার করবেন

Question

আমি এখানে কৌনিক নির্বাচন নির্দেশাবলীর ডকুমেন্টেশন দেখেছি: http://docs.angularjs.org/api/ng.directive:select । আমি কীভাবে ডিফল্ট মান সেট করতে পারি তা অনুভব করতে পারি না। এটা সন্দ্বিহান:

অ্যারেতে মান হিসাবে লেবেল হিসাবে নির্বাচন করুন

বস্তুটি এখানে:

{
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
}

এইচটিএমএল (কাজ করছে):

<select><option ng-repeat="value in prop.values">{{value}}</option></select>

এবং তারপরে আমি prop.valueডিফল্ট বিকল্প হিসাবে কাজ করার জন্য নির্বাচিত উপাদানটির ভিতরে এনজি-বিকল্পের বৈশিষ্ট্য যুক্ত করার চেষ্টা করছি (কাজ করছে না)।

ng-options="(prop.value) for v in prop.values"

আমি কি ভুল করছি?

Answer 1

সুতরাং ধরে নিই যে সেই জিনিসটি আপনার সুযোগে রয়েছে:

<div ng-controller="MyCtrl">
  <select ng-model="prop.value" ng-options="v for v in prop.values">
  </select>
</div>

 

function MyCtrl($scope) {
  $scope.prop = {
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
  };
}

ওয়ার্কিং প্লঙ্কার: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

Comments

ঠিক আছে, আমি বুঝতে পেরেছি! ng-optionপ্রতিস্থাপন করা হয় <option ng-repeat="value in prop.values">{{value}}</option>আবার ধন্যবাদ

— ফ্রাসোয়া রোমাঁ

এটি করার একটি সহজ উপায় হতে পারে, আমি কৌনিক জেএসে একটি সাধারণ সিলেক্ট ডিফল্ট মানের জন্য এটি খুব জটিল মনে করি

— এডমন্ড রোজাস

এনজি-বিকল্পের নির্দেশিকাটি এর সিনট্যাক্সটিতে কিছুটা জটিল এবং বিভ্রান্তিকর। আমি মনে করি অবজেক্টগুলিকে বাঁধতে নমনীয়তা এটিকে কিছুটা জটিল করে তুলেছে। আমি এটি যেভাবে মনে রাখার চেষ্টা করি তা হ'ল আমি যখনই কোনও অবজেক্টটি ব্যবহার করছি তখন আমি নির্বাচিত নিয়ন্ত্রণের মান / পাঠ্য বৈশিষ্ট্যের জন্য কী কী বৈশিষ্ট্যগুলি ব্যবহার করতে হবে তা স্পষ্টভাবে নির্দেশ করি। আরও তথ্যের জন্য এটি দেখুন: ozkary.com/2015/08/angularjs-ngoption-directive-ssplified.html

— ozkary

বিকল্পগুলি না লিখে আপনি যদি ভিউতে একটি নির্বাচন তৈরি করতে চান এবং একটির নির্বাচিত হন<select ng-model="limit" value="10" ng-options="v for v in [5,10,15,20,30,50]"></select>

— আশেরার্ড

@ জেমস ক্লিহ .. আপনি যেহেতু তাদের চেনেন সেহেতু আপনি এখানে প্রথম বিকল্পটি হার্ডকোডিং করছেন ut তবে আমরা যদি বিকল্পগুলি না জানি এবং আমরা কীভাবে প্রথমটিকে একটি ডিফল্টরূপে প্রদর্শন করতে পারি?

— এইচ ভার্মা

Answer 2

নির্বাচন জন্য কৌণিক ডকুমেন্টেশন * স্পষ্টভাবে এই প্রশ্নের উত্তর দিতে না, কিন্তু এটা আছে। আপনি যদি এটি দেখতে পান তবে script.jsআপনি এটি দেখতে পাবেন:

function MyCntrl($scope) {
  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // Default the color to red
}

এটি এইচটিএমএল:

<select ng-model="color" ng-options="c.name for c in colors"></select>

এটি একটি একটি মান নির্বাচিত খেলাপি একটি সুস্পষ্ট পথ আছে বলে মনে হয় <select>সঙ্গে ng-options। এছাড়াও আপনার বিভিন্ন লেবেল / মান থাকলে এটি কাজ করবে।

* এটি কৌনিক 1.2.7 থেকে

Comments

এটি আমার জন্য কাজ করেছে, আমি সন্দেহ করি এটি আবার প্রকাশিত হবে তবে আমি বর্তমানে AngularJS v1.2.27 ব্যবহার করছি যদি কেউ এটির সন্ধান করে এবং সামঞ্জস্যতা নিয়ে ভাবছে তবে।

— রবার্ট ক্যাডমায়ার

Answer 3

আপনি যখন কোনও ডিবি থেকে ডেটা আনছেন, পরিবর্তন করবেন এবং তারপরে পরিবর্তনগুলি অবিরত করবেন তখন এই উত্তরটি আরও কার্যকর।

 <select  ng-options="opt.id as opt.name for opt in users" ng-model="selectedUser"></select>

উদাহরণটি এখানে দেখুন:

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

Comments

অবশেষে এখানে একটি কার্যকরী উত্তর, upvated! এছাড়াও এই সমাধানের সাহায্যে আপনি সঠিকভাবে অপরিজ্ঞাত বিকল্প ওয়ার্নিগ রাখতে পারেন। <বিকল্প মান = ""> দয়া করে নির্বাচন করুন </

— ডিডিডি

এই পোস্টটি উপস্থিত হওয়ায় খুশি হলাম, আমি একটি সমাধানের জন্য কিছুক্ষণ অনুসন্ধান করেছি এবং এটি আমার সমস্যাটি সমাধান করেছে।

— sle423

Answer 4

<select name='partyid' id="partyid" class='span3'>
<option value=''>Select Party</option>
<option ng-repeat="item in partyName" value="{{item._id}}" ng-selected="obj.partyname == item.partyname">{{item.partyname}}
</option>
</select>

Comments

খারাপ অনুশীলন এখানে ... দ্বিতীয় হলুদ নোটটি দেখুন: ডকস.আঙ্গুলারজ.স.আর / আইপি / ইং / ডাইরেক্টিভ / সিলেক্ট করুন ।

— এমসিয়র তোফ

এটি কাজ করবে না, প্রাক্তন। আপনি যখন রেকর্ডটি সম্পাদনা করার চেষ্টা করবেন, রেকর্ডটি ক্ষেত্রের সাথে কীভাবে আবদ্ধ হবে?

— উইন্ডমায়াও

Answer 5

যদি আপনার বস্তুর অ্যারে জটিল হয় তবে:

$scope.friends = [{ name: John , uuid: 1234}, {name: Joe, uuid, 5678}];

এবং আপনার বর্তমান মডেলটি এমন কিছুতে সেট করা হয়েছিল:

$scope.user.friend = {name:John, uuid: 1234};

এটি track byইউউইড (বা কোনও অনন্য ক্ষেত্র) -এ ফাংশনটি ব্যবহার করতে সহায়তা করেছিল , যতক্ষণ না এনজি-মডেল = "ইউজার ফ্রেন্ড" এর ইউউইড থাকে:

<select ng-model="user.friend" 
ng-options="friend as friend.name for friend in friends track by friend.uuid"> 
</select>

Comments

এই উত্তর আমার দিন তৈরি! এই ডকুমেন্টেশনের মাধ্যমে ট্র্যাকটি একবার দেখুন: ডকস.আঙ্গুলারজ.স.আর.পি.আই.সি

— ডাইরেক্টিভ

এটাই সেরা উত্তর!

— জিফ্রিড

Answer 6

আমি কয়েক ঘন্টা ধরে এটির সাথে লড়াই করেছি, সুতরাং আমি এর জন্য কিছু স্পষ্টতা যুক্ত করতে চাই, এখানে উল্লিখিত সমস্ত উদাহরণগুলি এমন ক্ষেত্রে উল্লেখ করে যেখানে ডেটা স্ক্রিপ্ট থেকে লোড করা হয়, কোনও পরিষেবা বা ডাটাবেস থেকে আসে না, সুতরাং আমি যেমন করি তেমন সমস্যা হওয়ার জন্য আমার অভিজ্ঞতা সরবরাহ করতে চাই।

সাধারণত আপনি আপনার ডাটাবেসে পছন্দসই বিকল্পের আইডি সংরক্ষণ করেন, তাই ... আসুন এটি দেখান

service.js,

myApp.factory('Models', function($http) {
var models = {};
models.allModels = function(options) {
    return $http.post(url_service, {options: options});
};

return models;
});

controller.js

myApp.controller('exampleController', function($scope, Models) {
$scope.mainObj={id_main: 1, id_model: 101};
$scope.selected_model = $scope.mainObj.id_model;
Models.allModels({}).success(function(data) {
    $scope.models = data; 
});
});

শেষ পর্যন্ত আংশিক এইচটিএমএল মডেল। Html

Model: <select ng-model="selected_model" 
ng-options="model.id_model as model.name for model in models" ></select>

মূলত আমি বাতলান যে টুকরা "চেয়েছিলেন মডেল মডেল জন্য model.name যেমন model.id_model " " model.id_model " এর জন্য "সঙ্গে মেলাতে পারে মানের জন্য মডেল আইডি ব্যবহার করে, তাই mainObj.id_model " যা হয় " নির্বাচিত_ মডেল ", এটি কেবল একটি সরল মান, এছাড়াও " মডেল.নাম " হ'ল পুনরাবৃত্তির জন্য লেবেল, অবশেষে " মডেলগুলির মধ্যে মডেল " কেবলমাত্র একটি নিয়মিত চক্র যা আমরা সবাই জানি।

আশা করি এটি কারওর পক্ষে সহায়তা করে এবং যদি তা হয় তবে দয়া করে ভোট দিন: ডি

Comments

আপনি কেবল ' mainObj.id_modelng-model="mainObj.id_model"selected_model

— প্লেসোল্ডার

হ্যাঁ, প্রকৃতপক্ষে, আমি কেবল এটি দেখাতে চেয়েছিলাম যে এটি কোনও মানের সাথে সরাসরি। সুযোগের মধ্যে করা যেতে পারে তবে এটি নির্দেশ করার জন্য ধন্যবাদ।

— উইস্টন করোনেল

কেবল কোনও ইনট নয়, কোনও জিনিসের সাথে বেঁধে রাখা কি সম্ভব? আমি আমার এনজিওশনগুলিকে তার নির্বাচিত আইটেমটি সেট করতে পারি না কারণ এটি কীভাবে আমার আইডি: 24} কে আমার [{আইডি: 23 23, {আইডি: 24}, {আইডি: 25}] বেঁধে রাখতে জানে না।

— ভিক্টোরিও বেরেরা

আপনি অবস্থানটি পেতে সর্বদা $ সূচকটি ব্যবহার করতে পারেন, তবে হ্যাঁ কোনও বস্তুর সাথে বাঁধাই সম্ভব

— উইস্টন করোনেল

Answer 7

<select id="itemDescFormId" name="itemDescFormId" size="1" ng-model="prop" ng-change="update()">
    <option value="">English(EN)</option>
    <option value="23">Corsican(CO)</option>
    <option value="43">French(FR)</option>
    <option value="16">German(GR)</option>

খালি মান সহ কেবল বিকল্প যোগ করুন। এটা কাজ করবে।

ডেমো Plnkr

Comments

আপনি যদি এর মতো কিছু যোগ করেন তবে এটি সত্যিই কাজ করে<option value="" disabled>Please Select</option>

— fWd82

Answer 8

এটি করার একটি সহজ উপায় হ'ল ডেটা-এনজি-থ্রি এভাবে ব্যবহার করা:

<select data-ng-init="somethingHere = options[0]" data-ng-model="somethingHere" data-ng-options="option.name for option in options"></select>

এখানে মূল পার্থক্য হ'ল আপনাকে অন্তর্ভুক্ত করতে হবে data-ng-model

Comments

ডক্সে বর্ণিত হিসাবে: নীচের ডেমোতে দেখা গেছে, এনজিআইনিটের একমাত্র যথাযথ ব্যবহার এনজিআরপিট এর বিশেষ বৈশিষ্ট্যগুলি হ্রাস করার জন্য। এই ক্ষেত্রেটি ছাড়াও, আপনার স্কোপগুলিতে মানগুলি আরম্ভ করার জন্য এনজিআইনিটের পরিবর্তে আপনার নিয়ামক ব্যবহার করা উচিত।

— ব্যবহারকারী 12121234

এনজি-অপশন সহ আমি যেভাবে পোস্ট করেছি, তা অনেক সহজ এবং আরও কংক্রিট। উভয় উপায় কাজ করে।

— ওয়াইত্রো

Answer 9

NG মডেল অ্যাট্রিবিউট নির্বাচিত বিকল্পটি সেট করে এবং এছাড়াও নল থেকে তোমার মত ফিল্টার পারবেন orderBy: orderModel.value

index.html

<select ng-model="orderModel" ng-options="option.name for option in orderOptions"></select>

controllers.js

$scope.orderOptions = [
    {"name":"Newest","value":"age"},
    {"name":"Alphabetical","value":"name"}
];

$scope.orderModel = $scope.orderOptions[0];

Comments

এটি চেষ্টা করে দেখছি angular.js:117 TypeError: a.forEach is not a function। কোন চিন্তা?

— carmenism

Answer 10

যদি কেউ মাঝেমধ্যে ডিফল্ট মান হিসাবে চলতে থাকে তবে ক্রোম, IE 10/11, ফায়ারফক্সের পৃষ্ঠাতে পপুলেটেড না হয়ে থাকে - এইচটিএমএল-তে পপুলেটেড ভেরিয়েবলের জন্য এই ইনপুটটি / সিলেক্ট ফিল্ড চেকিংয়ে এই বৈশিষ্ট্যটি যুক্ত করার চেষ্টা করুন:

<input data-ng-model="vm.x" data-ng-if="vm.x !== '' && vm.x !== undefined && vm.x !== null" />

Answer 11

সত্যিই সহজ যদি আপনি কিছু সংখ্যক আইডির সাহায্যে আপনার বিকল্পগুলি সূচীকরণের বিষয়ে চিন্তা করেন না।

1. আপনার $ স্কোপ ভেরি - লোক অ্যারে ঘোষণা করুন

   $scope.people= ["", "YOU", "ME"];

2. উপরোক্ত স্কোপের ডোমটিতে অবজেক্ট তৈরি করুন

   <select ng-model="hired" ng-options = "who for who in people"></select>

3. আপনার নিয়ামক হিসাবে, আপনি আপনার এনজি-মডেল "ভাড়াটে" সেট করেছেন।

   $scope.hired = "ME";

শুভকামনা !!! এটা সত্যিই সহজ!

Answer 12

শুধু যোগ করার জন্য, আমি এই জাতীয় কিছু করেছি।

 <select class="form-control" data-ng-model="itemSelect" ng-change="selectedTemplate(itemSelect)" autofocus>
        <option value="undefined" [selected]="itemSelect.Name == undefined" disabled="disabled">Select template...</option>
        <option ng-repeat="itemSelect in templateLists" value="{{itemSelect.ID}}">{{itemSelect.Name}}</option></select>