CODEWITHSUNDEEP
angularjs
James D.
James D.

Reputation: 117

UI-Select does not bind to the array (doesn't even appear!) with AngularJS

I have an array of data for UI-SELECT but it does not appear in the view. I am new to the language. I thought I loaded the js files well in , but I guess not.

[HEAD Part in HTML]

<head>
  <meta charset="UTF-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
  <script src="app.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.js"></script>
</head>

[UI-SELECT Part]

<ui-select ng-model="project_type.selected" theme="bootstrap">
  <ui-select-match>{{$select.selected.project_type_item}}</ui-select-match>
  <ui-select-choices repeat="item in project_types | filter: $select.search">
    <div ng-bind-html="item.project_type_item | highlight: $select.search"></div>
    <small ng-bind-html="item.project_type_item_sub | highlight: $select.search"></small>
  </ui-select-choices>
</ui-select>

[Data from Controller]

$scope.project_type = {};
$scope.project_types = [
    { project_type_item: 'type1', project_type_item_sub: 'sub explanation 1' },
    { project_type_item: 'type2', project_type_item_sub: 'sub explanation 2' },
];

[The JSON File]

[{
"project_id": "1",
"project_title": "Demo 1",
"project_type" : "Type 1"
}, {
"project_id": "2",
"project_title": "Demo 2",
"project_type" : "Type 2"
}]

As other beginners like me would wander around, please kindly advise me what is wrong with the UI-SELECT in the Plunker below:

http://plnkr.co/edit/kB5nsDwMU28X4LIbCL1G?p=preview

So, to sum up, I am trying to:
1) make sure the UI-SELECT is working.
2) it loads the data from the controller (the name is BooksCtrl)
3) and the have the UI-SELECT field selected with the data from the JSON file.

Could anyone please kindly help me with the issues?

Thank you so much in advance!!!

Upvotes: 0

Views: 60

Answers (1)

pegla
pegla

Reputation: 1866

SMALL SLAP ON THE WRIST:

First you shouldn't ask questions like this, just show all your code and say can you fix this? what you should do is first go step by step check if each step is working as separate app - reproduce each in it's own plunker:

1.step - make sure your ui-router is working properly with minimal example

2.step - make sure your ui-select is working with minimal example

3.step - make sure your services are returning proper data

After you're sure that above steps are working - ask question for each of them separately - then proceed integrating stuff together, try to do it yourself and ask question if you fail doing it. We will help.

THE ANSWER:

I can see you have multiple issues in your code, so I will show you some issues in your code and leave you to fix rest.

First make sure your scripts are loaded in proper order your app.js should be at the end after all other vendor libraries are there loaded:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.js"></script>
  <script src="app.js"></script>

Also keep in mind for ui-select to work properly you would need to import css styles put it in <head> tag otherwise it looks really ugly:

<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.css" media="all" rel="stylesheet" />

And it would be useful to add bootstrap css as well to actually see input field - you need some styling:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="all" rel="stylesheet" />

Then you don't have ui-select dependency in your app:

var app = angular.module('demo', ['ui.router','ui.select']);

Then your ui-router is complaining about unhandled rejections so you might want to fix those issues as well by injecting $qProvider and setting errorOnUnhandledRejections to false:

app.config(['$stateProvider', '$urlRouterProvider', '$qProvider',
  function($stateProvider, $urlRouterProvider, $qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
    //...your code
  }

To be able to use ui-select you need to expose all projects to BooksDetailCtrl $scope as well as one that's been selected (you already have that covered):

  ProjectService.getProjects().then(res=>{
    $scope.allProjects = res;
  });

LAST PART

I will make a guess and say that you want to switch between states using that ui-select. So after you have all of this above you will need to change your ui-select html to be like this (ui-select-match will match project title and item will be selected item object - project from allProjects):

<ui-select on-select="onSelected($item)" ng-model="project_data" theme="bootstrap">
      <ui-select-match>
        <span ng-bind="$select.selected.project_title"></span>
      </ui-select-match>
      <ui-select-choices repeat="item in (allProjects | filter: $select.search) track by item.project_id">
          <span ng-bind="item.project_title"></span>
      </ui-select-choices>
    </ui-select>

If you see I added on-select="onSelected($item)" so you will have to create onSelected function on $scope, and set your model to that all projects that was added previously:

$scope.onSelected = (selectedProject) => {
    $state.go('books.detail', {project_id: selectedProject.project_id});
  }

Above function onSelected will do state switch and will switch to proper state depending on selected item in ui-select.

Here's plunker with all of this working:

http://plnkr.co/edit/25PZ1wgCAHtG5M51ItZf?p=preview

I hope this is helpful, you're in luck I had free time to look at this (good thing you put in plunker) since no one would actually give this question any attention, it's too broad - next time when you're posting question separate questions and follow steps and ask everything separately, you will get your questions resolved in no time.

Cheers,

Upvotes: 1

Related Questions