Tengo una lista de objetos en angularjs y con eso lleno algunos html de la siguiente manera, tengo una lista con elementos, por ejemplo, el texto se mostrará en la lista como

Item1
Item2
Item3

Ahora, cuando un usuario selecciona uno de estos, asocio los datos a los controles a continuación en la página, pero si seleccionan otro, se unen al control y las primeras selecciones ui ya no se muestran.

<div class="form-group" >
    <label for="sEntity" class="col-md-3 control-label">S-Entity</label>
    <div class="col-md-9">
        <div id="sEntity" options="sList" ng-model=selected ng-bind="selectedValue"></div>
    </div>
</div>
<div class="form-group">
    <label for="sColumns" class="col-md-3 control-label">Mappings</label>
    <div class="col-md-9">
        <div id="sColumns" options="sColumnsList"
             selected-model="sColumnsLookup" checkboxes="true"></div>
    </div>
</div>              

Pidiendo alguna orientación sobre cuál sería la mejor manera de reproducir esto en la página, de modo que cuando seleccionen uno, de alguna manera se agregue a un contenedor y se muestre en la pantalla, algo así como agregar html. Además, si el usuario decide eliminar un valor de la lista anterior, digamos Item3, se eliminará del contenedor de html. ¿Repetiría el trabajo ng o se requeriría una directiva para crear html dinámico cada vez que un usuario seleccione?

1
Mel 1 oct. 2019 a las 08:42

3 respuestas

La mejor respuesta

Primero debe declarar una estructura JSON que se pueda iterar usando ng-repeat. Después de eso, puede usar $index para ng-repeat para acceder al índice de cada elemento y empujar su objeto de mapeo.

Con el enlace bidireccional, las cosas deberían mostrarse en la pantalla tan pronto como presione el elemento.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.list = [{
    name: 'Item 1',
    mappings: []
  }, {
    name: 'Item 2',
    mappings: []
  }, {
    name: 'Item 3',
    mappings: []
  }];

  $scope.addMapping = index => {
    // this is where your service call goes
    $scope.list[index].mappings.push({
      name: `Mapping ${index + 1}.1`,
      id: new Date().getTime(),
      selected: true
    }, {
      name: `Mapping ${index + 1}.2`,
      id: new Date().getTime(),
      selected: false
    })
  };
});
.entity {
  background: #ccc;
  margin-bottom: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">

  <div class="form-group entity" ng-repeat="item in list">
    <div ng-click="addMapping($index)">{{ item.name }}</div>
    <div class="form-group" ng-show="item.mappings.length > 0" ng-repeat="mapping in item.mappings">
      <div class="">
        <label for="{{$index}}_{{mapping.id}}">{{ mapping.name }}</label>
        <input type="checkbox" id="{{$index}}_{{mapping.id}}" ng-model="mapping.selected"/>
      </div>
    </div>
  </div>

  <pre>{{list | json}}</pre>
</div>
2
Nidhin Joseph 1 oct. 2019 a las 10:28

Puede usar ng-repeat que está disponible en angularjs. Que se utiliza para hacer un bucle de matriz de objetos y se puede imprimir en html.

<h1 ng-repeat="x in records">{{x}}</h1>

Aquí los registros son una matriz de objetos y x es un objeto único que se muestra. También puede acceder a las teclas de x utilizando anotaciones de puntos como x.name, etc.

0
jigar kataria 1 oct. 2019 a las 08:00

Puede enlazar fácilmente el html usando ng-html-bind

<p ng-bind-html="myText"></p>

Donde $scope.myText = <....some html text..>

Esto lo puedes usar dentro de ng-repeat

0
Abhishek Tiwari 1 oct. 2019 a las 05:55