CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatangular-ngmodelangularjs-ng-value
user6656724
user6656724

Reputation:

how to use ng-init with ng-repeat

I am creating a web app in which i am using dropdown and angularjs for updating my database,

this is my syntax of my dropdownlist

<select ng-model="ucomname" ng-change="uucomname(o)">
       <option ng-repeat="o in comnamelistfun" value="{{o.comname}}">{{o.comname}}</option>
</select>

first value in this dropdown is coming blank but i want the first value of my dropdown to be the first value of my dropdown, when i used ng-init i am not able to send the value in ng-model any idea?

Upvotes: 1

Views: 2033

Answers (3)

Sravan
Sravan

Reputation: 18647

First in your Controller,

app.controller('cardController', ['$scope',
    function($scope) {
    $scope.ucomname = $scope.comnamelistfun[0]
}])

Then the select box is,

<select ng-model="ucomname" ng-change="uucomname(o)" ng-options="o for o in comnamelistfun">
</select>

This shld work for you.

Upvotes: 1

Abdulsalam Khan
Abdulsalam Khan

Reputation: 57

You can use this. http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

    (function() {
  'use strict';

  angular
    .module('app', [])
    .controller('HomeCtrl', HomeCtrl);

  HomeCtrl.$inject = ['$scope'];

  function HomeCtrl($scope) {

    $scope.cities = [
      { id: 1, name: 'London' },
      { id: 2, name: 'Chicago' },
      { id: 3, name: 'Moscow' },
      { id: 4, name: 'Mumbai' },
      { id: 5, name: 'Casablanca' }
      ];

    // Pre-select city by id
    $scope.selectedCityId = 1;

    // Pre-select city by object
    $scope.selectedCity = { id: 1, name: 'Casablanca' };

  }
})();

    <!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="style.css" />
</head>

<body ng-controller="HomeCtrl">
  <h3>Data List</h3>

  <table>
    <tbody>
      <tr ng-repeat="city in cities">
        <td>{{city.id}}</td>
        <td>{{city.name}}</td>
      </tr>
    </tbody>
  </table>

  <h3>Selected City (by Id)</h3>
  selectedCityId: <strong>{{selectedCityId}}</strong>
  <br/>
  <br/>
  <label>Select City
    <select ng-model="selectedCityId" ng-options="city.id as city.name for city in cities">
      <option value="">-- Select City --</option>
    </select>
  </label>

  <hr/>

  <h3>Selected City (by object)</h3>
  selectedCity: <strong>{{selectedCity}}</strong>
  <br/>
  <br/>
  <label>Select City
    <select ng-model="selectedCity" ng-options="city as city.name for city in cities track by city.id">
      <option value="">-- Select City --</option>
    </select>
  </label>

  <hr/>

  <!-- Scripts -->
  <script data-require="[email protected]" data-semver="1.5.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src="HomeCtrl.js"></script>

</body>
</html>

Upvotes: 1

Manish Singh
Manish Singh

Reputation: 538

Try this code.

<select ng-model="ucomname" ng-options= "o.comname for o in comnamelistfun track by o.comname">
</select>

and in your controller. Put this.

$scope.ucomname = $scope.comnamelistfun[0]; //This will select the first element.

I hope it should work :)

Upvotes: 0

Related Questions