angularjs - condition for ng-model -


help me please ng-model. have input field when selecting substituted values array 'posters'. yhe value selected filter appear in list. list displayed default 'the grund tour'. when enter in form of value not in array - in list displays empty field, need displayed or value of array or default value (if form entered value not of array). have no idea how it. think may possible apply condition ng-model make work values of array

my code html:

<div class="container" ng-controller = "formcontroller">     <div class="container__item container__form"><!-- 1 -->         <form action="" class="form">             <input type="text" class="form__input" placeholder="search..." autocomplete="on" list="posters" ng-model="postertitle"  >             <datalist id="posters" >                 <option ng-repeat="poster in posters" >{{poster.title}}                 </option>             </datalist>          </form>              </div>     <div class="container__item container__list"><!-- 2 -->          <ul class="list" id="item">             <li class="list__item" ng-if="poster.title =='the grand tour'" ng-repeat="poster in posters | filter:postertitle"><i class="fa fa-rocket list__fa" aria-hidden="true"></i>{{poster.title}}</li>             <li class="list__item" ng-if="poster.title!='the grand tour'" ng-repeat="poster in posters | filter:{title:postertitle}">{{poster.title}}</li>         </ul>     </div>       </div>

controller:

'use strict';   angular.module('oldmentest')    .controller('formcontroller', ['$scope', 'postersname', function($scope, postersname) {     $scope.posters= postersname.getposters();      $scope.postertitle = '';  }]);

var: 

'use strict';  angular.module('oldmentest')  .service('postersname', function() {  var posters = [{     title: 'var1',     description: 'lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.',     image: 'resources/images/mars.jpg' }, {     title: 'var2',     description: 'tlorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.',     image: 'resources/images/earth.jpg' }, {     title: 'var3',     description: 'lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.',     image: 'resources/images/venus.jpg' } ];  this.getposters = function(){     return posters; };  });

thanks hepl!

as understand have apply filter conditionally on specific property or properties based on title.

you below. 

<li class="list__item"   ng-init="poster.filter = (poster.title =='the grand tour' ? {filter: postertitle }: postertitle"   ng-repeat="poster in posters | filter: poster.filter">       <i ng-if="poster.title =='the grand tour'" class="fa fa-rocket list__fa" aria-hidden="true"></i>.       {{poster.title}}  </li>

-

Comments

Post a Comment

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

i writing web app multiple listeners(evcentsource sse clients js) connected server . want store sse emitter per connected listener : can done in memory or other means assigning id each client able achieve far now question ; how send response/event specific client connected web app ? while doing sseemmiters stored either getting completed or timed out. how prevent ? how keep sseemmiter available open infinite time (till client closes) , send events selectively .
Read more

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

i'm trying implement crud operation using datatableseditor using datatables.but i'm getting error messages: 1)uncaught exception: datatables editor - remote hosting of code not allowed. please see http://editor.datatables.net details on how purchase editor license 2)typeerror: a.editor undefined 3) $.fn.datatable.editor not constructor" what reason? here configuration: <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>insert title here</title> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.datatables.min.css"> <link re...
Read more

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -

i trying convert json java object use of gson in maven, following youtube video guidance - https://www.youtube.com/watch?v=vqgghm9pwe0 , theres error occurs when in main class error - package com.squareup.okhttp3 doesn't exist. code below: java package com.codebeasty.json; import com.squareup.okhttp3.okhttpclient; public class main { private static okhttpclient client = new okhttpclient(); public static void main (string [] args) { } } i put in dependency in pom.xml: <dependencies> <dependency> <groupid>com.squareup.okhttp3</groupid> <artifactid>okhttp</artifactid> <version>3.4.2</version> </dependency> <dependency> <groupid>com.google.code.gson</groupid> <artifactid>gson</artifactid> <version>2.8.0</version> </dependency> </dependencies> i dont understand why doesn't recognize com.squareup. there may need download? have downl...
Read more