javascript - How can I show data based on my requirements in angularjs? -

-

in example based on mobile brand selection mobile models coming checkbox working. based on user brand selection mobile models coming.

for htc brand have models image when user clicks htc models should show images instead of showing

htc 1 x9

desire 820

desire 810s

it should show images check box while submit should pass model name. 1 appreciated 

var myapp = angular.module('myapp', []);    myapp.controller('myctrl', function($scope, $http) {    $scope.selectedbrands = [];      $scope.selectbrand = function(selectedphone) {      // if deselect brand      if ($scope.selectedbrands.indexof(selectedphone.brandname) === -1) {        // deselect phones of brand        angular.foreach($scope.phones, function(phone) {          if (phone.brandname === selectedphone.brandname) {            phone.selected = false;          }        });      }    }      $scope.checkselectedphones = function() {      var modelnames = [];      var jsonarr = [];      var submodelarr = [];      var aletrmsg = '';      angular.foreach($scope.phones, function(phone) {        if (phone.selected) {          modelnames.push(phone);          var found = jsonarr.some(function(el) {            if (el.model === phone.brandname) {              el.submodel.push(phone.modelname);              return true;            }          });            if (!found) {            submodelarr.push(phone.modelname);            jsonarr.push({              model: phone.brandname,              brand: 'nokia',              submodel: submodelarr,              city: 'noida',              });            submodelarr = [];          }          }          phone.selected = false;      });      console.log(modelnames.length);      if (modelnames.length == 0) {        alert(modelnames.length ? aletrmsg : 'no phones selected!');      } else {        console.log(jsonarr);      }        $scope.selectedbrands = [];    }      $scope.phones = [{      id: "986745",      brandname: "nokia",      modelname: "lumia 735 ts"    }, {      id: "896785",      brandname: "nokia",      modelname: "nokia asha 230"    }, {      id: "546785",      brandname: "nokia",      modelname: "lumia 510"    }, {      id: "144745",      brandname: "samsung",      modelname: "galaxy trend 840"    }, {      id: "986980",      brandname: "samsung",      modelname: "galaxy a5"    }, {      id: "586980",      brandname: "samsung",      modelname: "galaxy note 4 duos"    }, {      id: "986980",      brandname: "samsung",      modelname: "galaxy a5"    }, {      id: "586980",      brandname: "samsung",      modelname: "galaxy note duos"    }, {      id: "232980",      brandname: "htc",      modelname: "htc 1 x9",      image:"http://cdn.bgr.com/2015/03/bgr-htc-one-m9-1.jpg",    }, {      id: "456798",      brandname: "htc",      modelname: "desire m9",      image:"https://vtcdn.com/sites/default/files/images/2014/6/10/img-1402379949-1.jpg",    }, {      id: "656798",      brandname: "htc",      modelname: "desire 810s",      image:"https://encrypted-tbn2.gstatic.com/images?q=tbn:and9gcqinolh4peebd7h8f5mm9sgdc14oqah91i4xqhjzl3llug1pkov",    }];    });    myapp.filter('unique', function() {    return function(collection, keyname) {      var output = [],        keys = [];        angular.foreach(collection, function(item) {        var key = item[keyname];        if (keys.indexof(key) === -1) {          keys.push(key);          output.push(item);        }      });        return output;    };  });
<div ng-controller="myctrl">    <button ng-click="checkselectedphones()">      check selected phones    </button>      <div ng-repeat="phone in phones | unique:'brandname'">      <label>        <input type="checkbox" ng-true-value="'{{phone.brandname}}'" ng-false-value="''" ng-model="selectedbrands[$index]" ng-change="selectbrand(phone)"> {{phone.brandname}}      </label>    </div>      <br>      <div ng-repeat="brand in selectedbrands track $index" ng-if="brand">      {{brand}}      <div ng-repeat="phone in phones" ng-if="phone.brandname === brand">        <label>          <input type="checkbox" ng-model="phone.selected"> {{phone.modelname}}          </label>      </div>    </div>  </div>

demo

i've made fiddle based on code. here's link: https://jsfiddle.net/0lggc5pn/

only htc phones have image. i've done add code:

<img ng-if="phone.image" src="{{phone.image}}" width="20" height="20"> <span ng-if="!phone.image">{{phone.modelname}}</span>

so if there image available, image displayed. otherwise display model name.

i've removed method called selectbrand(), didn't seem necessary.


Comments

Post a Comment

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

-
can configure following sample code ? when run following code, error : no entity framework provider found ado.net provider invariant name 'devart.data.sqlite' setting in machine.config <system.data> <dbproviderfactories> <add name="dotconnect sqlite" invariant="devart.data.sqlite" description="devart dotconnect sqlite" type="devart.data.sqlite.sqliteproviderfactory, devart.data.sqlite, version=4.6.287.0, culture=neutral, publickeytoken=09af7300eec23701" /> </dbproviderfactories> </system.data> after add below block code in app.config <?xml version="1.0"?> <configuration>   <configsections> <!-- more information on entity framework configuration, visit http://go.microsoft.com/fwlink/?linkid=237468 --> <section name="entityframework" type="system.data.entity.internal.configfile.entityframeworksection, entit...
Read more

java - Copying object fields -

-
what best way of copying classes when need have 2 independent variables? have simple class: public class myclass { boolean = false; string b= "not empty"; } do need make method : assign(myclass data ) { a= data.a; b= data.b; } is there automatic method copy (duplicate) objects in java? do need make method : pretty close. instead of making method, should make constructor. such constructors called copy constructor , , create them this: myclass(myclass data) { = data.a; b = data.b; } and create copy of instance, use constructor this: myclass obj1 = new myclass(); myclass obj2 = new myclass(obj1); copy constructor can tedious : using copy constructor create deep-copy can tedious, when class has mutable fields. in case, assignment create copy of reference, , not object itself. have create copy of fields (if want deep copy). can go recursive. a better way create deep copy serialize , deserialize object. why not use clone()? ...
Read more

c++ - Clear the memory after returning a vector in a function -

-
i have function processes , stores lot of data in , returns results vector of class. amount of data stored in function tremendous , want clear storage memory of function after finished job. necessary (does function automatically clear memory) or should clear memory function? update: vector<customers> process(char* const *filename, vector<int> id) { vector<customers> list_of_customers; (perform actions) return list_of_customers; } variables defined locally within function automatically released @ end of function scope. destructors objects called, should free memory allocated objects (if objects coded correctly). example of such object std::vector . anything you've allocated new must have corresponding delete release storage. try avoid doing own allocation , use raii instead, i.e. containers or smart pointers.
Read more