Link select with AngularJS data

Question

Link select with AngularJS data

Navigation

#1 by (2 votes)

1

I request your collaboration to indicate how to link the data of an object with <select>

app.controller('nombreCtrl', ['$scope', '$http',
 function($scope, $http) {
  $scope.nino = {
    nombre: 'Julian',
    sexo: 1,
    edad: 0,
    procedencia: "0",
    etnia: "2",
    municipio: "1",
    fase: "1",
    estado: "1",
    id_alimento: '2'
  };

  $scope.alimentos = [{
    id_alimento: '1',
    nombre: 'Almuerzo'
  }, {
    id_alimento: '2',
    nombre: 'Desayuno'
  }, {
    id_alimento: '3',
    nombre: 'Cena'
  }]
}])


  <div class="form-group">
  <label for="select" class="col-lg-2 texto-izq" >Comida</label>
    <div class="col-lg-10">
      <select class="form-control" id="select" ng-model="nino.id_alimento">
        <option ng-repeat="dato in alimentos" value="dato.id_alimento">
          {{dato.nombre}}
        </option>
      </select>
    </div>
  </div>

What I need is to link the data of the child id_alimento with the food arrangement

javascript html json angularjs

asked by Gdaimon 30.08.2016 в 14:34

source

1 answer

Read Java JSON file Know the application that is in first or second plane in Android

score 2 · Accepted Answer

You can combine <options> with ng-selected , keep in mind that you must also interpolate the value .

Greetings.

var app = angular.module('app', []);

app.controller('nombreCtrl', ['$scope', '$http',
  function($scope, $http) {
    $scope.nino = {
      nombre: 'Julian',
      sexo: 1,
      edad: 0,
      procedencia: "0",
      etnia: "2",
      municipio: "1",
      fase: "1",
      estado: "1",
      id_alimento: '2'
    };

    $scope.alimentos = [{
      id_alimento: '1',
      nombre: 'Almuerzo'
    }, {
      id_alimento: '2',
      nombre: 'Desayuno'
    }, {
      id_alimento: '3',
      nombre: 'Cena'
    }]
  }
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="nombreCtrl">
  <select id="select" ng-model="nino.id_alimento">
    <option ng-repeat="dato in alimentos" 
            value="{{dato.id_alimento}}" 
            ng-selected="{{dato.id_alimento == nino.id_alimento}}">
      {{dato.nombre}}
    </option>
  </select>
</div>