কৌণিক.জেজে ইনলাইন শর্তাদি


192

আমি ভাবছিলাম যে এনজি-শো ইত্যাদি ব্যবহার ব্যতীত শর্তসাপেক্ষে সামগ্রী প্রদর্শন করার কৌনিক কোনও উপায় আছে কিনা? উদাহরণস্বরূপ ব্যাকবোন.জেএসএসে আমি কোনও টেমপ্লেটে ইনলাইন সামগ্রী সহ কিছু করতে পারি:

<% if (myVar === "two") { %> show this<% } %>

তবে কৌণিকভাবে, আমি এইচটিএমএল ট্যাগগুলিতে মোড়ানো জিনিসগুলি দেখানো এবং আড়াল করার মধ্যে সীমাবদ্ধ বলে মনে হয়

<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>

এইচটিএমএল ট্যাগগুলিতে সামগ্রী মোড়ানোর পরিবর্তে {{} using ব্যবহার করে শর্তসাপেক্ষভাবে কৌণিকতার সাথে ইনলাইন সামগ্রীটি দেখানোর এবং আড়াল করার প্রস্তাবিত উপায় কী?


6
আপনি যখন সুযোগ পান দয়া করে আমার উত্তরটি অগ্রহণযোগ্য 2 টি টিড এর গ্রহণ করুন।
বেন লেশ

উত্তর:


139

সম্পাদনা: 2 নীচের টিডের উত্তর আপনি যা খুঁজছেন তা হল! উক্ত জিনিসটিকে উচ্ছেদ করুন

আপনি যদি কৌণিক <= 1.1.4 ব্যবহার করছেন তবে এই উত্তরটি করবে:

এর জন্য আরও একটি উত্তর। আমি একটি পৃথক উত্তর পোস্ট করছি, কারণ এটি সমাধানের সম্ভাব্য সমাধানের তালিকার চেয়ে একটি "সঠিক" প্রচেষ্টা বেশি:

এখানে এমন একটি ফিল্টার রয়েছে যা একটি "তাত্ক্ষণিক" যদি করবে (ওরফে আইআইএফ):

app.filter('iif', function () {
   return function(input, trueValue, falseValue) {
        return input ? trueValue : falseValue;
   };
});

এবং এটি ব্যবহার করা যেতে পারে:

{{foo == "bar" | iif : "it's true" : "no, it's not"}}

আপনাকে ধন্যবাদ ব্লেশ, এই আমি যাচ্ছিলাম। তবে আমি লক্ষ্য করেছি যে যদি আমি এটির একটি ভুলে যাওয়া মানগুলির মধ্যে একটি এইচটিএমএল ট্যাগ রাখার চেষ্টা করি: {{জিনিস.second == "দুই" | iif: "<ul class = 'two-class'>": "<ul>"}} আমি বুঝতে পারি যে কৌণিকভাবে এটি করার আরও ভাল উপায় থাকতে পারে তবে "<" এবং ">" এড়িয়ে যাওয়ার উপায় আছে কি? যাতে স্ট্রিংয়ের অংশ হিসাবে ট্যাগগুলি আউটপুট হতে পারে?
ব্যবহারকারী 1469779

1
এনজিবিন্ড এইচটিএমএল আউটপুট দেয় না, আপনি এনজি-বাইন্ড-এইচটিএমএল-অনিরাপদ
বেন লেশ

কৌণিক ডকুমেন্টেশনে এনজি-বিনফ-এইচটিএমএল-অনিরাপদ উদাহরণ এটি একটি ট্যাগের মধ্যে ব্যবহার করে, উদাহরণস্বরূপ <কোনও এনজি-বাইন্ড-এইচটিএমএল-অনিরাপদ = "{প্রকাশ}">। আমি ইনলাইন করার চেষ্টা করছি এটি করা সম্ভব নাও হতে পারে।
ব্যবহারকারী 1469779

1
আইআইএফ হ'ল "ইনলাইন ইফ" এর সংক্ষেপণ। এটি বিভিন্ন প্রোগ্রামিং ভাষায় প্রচলিত ... ঠিক তেমন সাধারণ নয়? ;)
বেন লেশ

18
আপনার উত্তরটি সম্পাদনা করার জন্য @ বেনলেশের বড় প্রপস এখন অন্য বিকল্প রয়েছে, ভাল কাজ।
নিক কোড

724

কৌণিক 1.1.5 টের্নারি অপারেটরগুলির জন্য সমর্থন যুক্ত করেছে:

{{myVar === "two" ? "it's true" : "it's false"}}

14
সর্বাধিক প্রচার সহ এই উত্তরটি উত্তরের শীর্ষে উপস্থিত হওয়া উচিত ... এটি এখন পর্যন্ত সবচেয়ে সঠিক
কোড হুইস্পেরার

3
ব্যবহারকারী 1469779 এই উত্তরটি গ্রহণ করার বিষয়টি বিবেচনা করুন কারণ আপনি বেশ কিছু সময়ের জন্য যা চান তা অর্জনের প্রস্তাবিত উপায়
ফিলিপ কিস

13
@ 2 টিড, আমার উত্তরটি পুরানো ছিল। এটি এখন সঠিক উত্তর, আমি জানি না যে ব্যবহারকারী এখন এটি "গ্রহণ" করতে ফিরে আসবে কিনা, তবে আমি আমার উত্তরটি এর মতো করেই বর্ণনা করেছি। এটি সফ্টওয়্যার বিকাশের পরিবর্তিত চেহারা।
বেন লেশ

2
ধন্যবাদ। myVarএটি মিথ্যা হলে কেবল কীভাবে আমি এর মান প্রদর্শন করতে পারি ? (অর্থাত্ আমি কীভাবে অভিব্যক্তিতে ভেরিয়েবলগুলিকে বাসাতে পারি?) আমি চেষ্টা করেছি {{myVar === "two" ? "it's true" : {{myVar}}}}কিন্তু এটি কার্যকর হয় না।
জোশ

6
@ জোশ myVarসম্পত্তি অতিরিক্ত কোঁকড়ানো ধনুর্বন্ধনী আবরণ প্রয়োজন হয় না, এটি ইতিমধ্যে একটি অভিব্যক্তি ভিতরে। চেষ্টা করুন{{myVar === "two" ? "it's true" : myVar}}
2:50

60

এই বিড়ালটির ত্বকের হাজারো উপায়। আমি বুঝতে পেরেছি যে আপনি if {}} এর মধ্যে স্পষ্টতই জিজ্ঞাসা করছেন, তবে অন্যদের জন্য যারা এখানে আসেন, আমি মনে করি এটি অন্যান্য বিকল্পগুলির মধ্যে কিছু প্রদর্শন করা উপযুক্ত।

আপনার $ সুযোগে কাজ করুন (আইএমও, বেশিরভাগ পরিস্থিতিতে এটি আপনার সেরা বাজি):

  app.controller('MyCtrl', function($scope) {
      $scope.foo = 1;

      $scope.showSomething = function(input) {
           return input == 1 ? 'Foo' : 'Bar';
      };
   });

 <span>{{showSomething(foo)}}</span>

অবশ্যই এনজি-শো এবং এনজি-হাইড

 <span ng-show="foo == 1">Foo</span><span ng-hide="foo == 1">Bar</span>

ngSwitch

 <div ng-switch on="foo">
   <span ng-switch-when="1">Foo</span>
   <span ng-switch-when="2">Bar</span>
   <span ng-switch-default>What?</span>
 </div>

বার্ট্র্যান্ডের পরামর্শ অনুসারে একটি কাস্টম ফিল্টার। (যদি আপনাকে বারবার একই জিনিস করতে হয় তবে এটি আপনার সেরা পছন্দ)

app.filter('myFilter', function() {
   return function(input) {
     return input == 1 ? 'Foo' : 'Bar';
   }
}

{{foo | myFilter}}

বা একটি কাস্টম নির্দেশ:

app.directive('myDirective', function() {
   return {
     restrict: 'E',
     replace: true,
     link: function(scope, elem, attrs) {
       scope.$watch(attrs.value, function(v) {
          elem.text(v == 1 ? 'Foo': 'Bar');
       });
     }
   };
});


<my-directive value="foo"></my-directive>

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

বরাবরের মতো, সর্বাধিক গুরুত্বপূর্ণ বিষয়টি হল আপনার সমাধানটি বজায় রাখা সহজ এবং আশা করি পরীক্ষামূলক। এবং এটি আপনার নির্দিষ্ট পরিস্থিতির উপর সম্পূর্ণ নির্ভর করবে।


18

এনজি-ক্লাস ব্যবহার করা যাবে না (শর্তসাপেক্ষে এসভিজি স্টাইল করার সময়) আমি শর্তাধীন শ্রেণি অ্যাটর সেট করতে নিম্নলিখিতটি ব্যবহার করছি:

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

একই বৈশিষ্ট্য অন্যান্য বৈশিষ্ট্য ধরণের জন্য কাজ করা উচিত।

(আমি মনে করি এনজি-অ্যাটর- ব্যবহার করার জন্য আপনাকে সর্বশেষতম অস্থির কৌণিক অবস্থানে থাকতে হবে, আমি বর্তমানে 1.1.4 এ আছি)

আমি AngularJS + SVG এর সাথে কাজ করার বিষয়ে একটি নিবন্ধ প্রকাশ করেছি যা এটি এবং অন্যান্য সম্পর্কিত বিষয়ে আলোচনা করে। http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS


15

একটি চলক সামগ্রী পরীক্ষা করার জন্য এবং একটি ডিফল্ট পাঠ্য থাকতে পারে, আপনি ব্যবহার করতে পারেন:

<span>{{myVar || 'Text'}}</span>

1
ধন্যবাদ! আমি এটি চেষ্টা করছিলাম তবে আমি স্ট্রিংয়ের কাছ থেকে উদ্ধৃতিগুলি মিস করছি :-)
সিমোনা আদ্রিয়ানি

যে কারণেই হোক না কেন, এই সিনট্যাক্সটি ওয়ান টাইম বাইন্ডিং ব্যবহার করে না .. {{:: মাইভার || 'পাঠ্য'} work কাজ করবে না। অবশ্যই ::
অওকেসন

3

আমি যদি আপনাকে ভালভাবে বুঝতে পারি তবে আমার মনে হয় এটি করার দুটি উপায় রয়েছে।

প্রথমে আপনি এনজিএসইচ চেষ্টা করতে পারেন এবং দ্বিতীয় সম্ভাব্য উপায়টি আপনাকে নিজের ফিল্টার তৈরি করবে । সম্ভবত এনজিউইচ হ'ল সঠিক অ্যাপ্রোচ তবে আপনি যদি ইনলাইন সামগ্রীটি কেবল {{}} ফিল্টার ব্যবহার করে লুকিয়ে রাখতে বা প্রদর্শন করতে চান তবে যাওয়ার উপায় is

এখানে একটি উদাহরণ হিসাবে একটি সাধারণ ফিল্টার সহ একটি ঝাঁকুনি রয়েছে।

<div ng-app="exapleOfFilter">
  <div ng-controller="Ctrl">
    <input ng-model="greeting" type="greeting">
      <br><br>
      <h1>{{greeting|isHello}}</h1>
  </div>
</div>

angular.module('exapleOfFilter', []).
  filter('isHello', function() {
    return function(input) {
      // conditional you want to apply
      if (input === 'hello') {
        return input;
      }
      return '';
    }
  });

function Ctrl($scope) {
  $scope.greeting = 'hello';
}

3

কৌণিক UI লাইব্রেরিতে কৌনিক UI 1.1.4 অবধি টেমপ্লেট / ভিউগুলিতে শর্তের জন্য অন্তর্নির্মিত নির্দেশনা ui-রয়েছে

উদাহরণ: UI 1.1.4 পর্যন্ত কৌণিক UI তে সমর্থন Support

<div ui-if="array.length>0"></div>

এনজি-যদি 1.1.4 পরে সমস্ত কৌণিক সংস্করণে উপলব্ধ

<div ng-if="array.length>0"></div>

অ্যারে ভেরিয়েবলে আপনার যদি কোনও ডেটা থাকে তবে কেবল ডিভ উপস্থিত হবে


ui-ifকমপক্ষে সর্বশেষ সংস্করণ কৌণিক-ইউআই থেকে অপসারণ করা হয়েছে তবে কৌণিক 1.1.5 থেকে আপনার কাছে ng-if( এই মন্তব্য থেকে )
ডেভ এভারিট

2

সুতরাং কৌণিক সঙ্গে 1.5.1 (অন্য কিছু MEAN স্ট্যাক নির্ভরতার উপর বিদ্যমান অ্যাপের নির্ভরতা ছিল যেহেতু আমি বর্তমানে 1.6.4 ব্যবহার করছি না)

এটি আমার পক্ষে ওপি বলার মতো কাজ করে {{myVar === "two" ? "it's true" : "it's false"}}

{{vm.StateName === "AA" ? "ALL" : vm.StateName}}

2

মান "0" হলে আপনি যদি "কিছুই না" প্রদর্শন করতে চান তবে আপনি এটি হিসাবে ব্যবহার করতে পারেন:

<span> {{ $scope.amount === "0" ?  $scope.amount : "None" }} </span>

বা কৌণিক জেএসে সত্য মিথ্যা

<span> {{ $scope.amount === "0" ?  "False" : "True" }} </span>

1

এমনকি বহিরাগত পরিস্থিতিতেও কাজ করে:

<br ng-show="myCondition == true" />

0

আমি মিশ্রণে আমার নিক্ষেপ করব:

https://gist.github.com/btm1/6802312

এটি একবারে যদি বিবৃতিটির মূল্যায়ন করে এবং কোনও পর্যবেক্ষক শ্রোতা যুক্ত করে না তবে আপনি সেই উপাদানটিতে একটি অতিরিক্ত বৈশিষ্ট্য যুক্ত করতে পারেন যা সেট-যদি ওয়েট-ফর = "কিছুডাটা.প্রপ" নামে সেট থাকে এবং এটি সেই ডেটা বা সম্পত্তি আগে সেট করার জন্য অপেক্ষা করবে একবার বিবৃতি মূল্যায়ন। যদি আপনি কোনও এক্সএইচআর অনুরোধ থেকে ডেটার জন্য অপেক্ষা করেন তবে অতিরিক্ত বৈশিষ্ট্যটি খুব কার্যকর হতে পারে।

angular.module('setIf',[]).directive('setIf',function () {
    return {
      transclude: 'element',
      priority: 1000,
      terminal: true,
      restrict: 'A',
      compile: function (element, attr, linker) {
        return function (scope, iterStartElement, attr) {
          if(attr.waitFor) {
            var wait = scope.$watch(attr.waitFor,function(nv,ov){
              if(nv) {
                build();
                wait();
              }
            });
          } else {
            build();
          }

          function build() {
            iterStartElement[0].doNotMove = true;
            var expression = attr.setIf;
            var value = scope.$eval(expression);
            if (value) {
              linker(scope, function (clone) {
                iterStartElement.after(clone);
                clone.removeAttr('set-if');
                clone.removeAttr('wait-for');
              });
            }
          }
        };
      }
    };
  });
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.