current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

can you please tell me how to create list dynamically in angulat.js..Actullly I am able to make list when user press add button and fill the field . In other words ,Please check this fiddle whenever you fill the fields it generate a row.And you can get Id when you click the row .Fiddle http://jsfiddle.net/wc4Jm/6/ Now I am trying to do this using bootstrap model .in other words on button click first I show a pop up screen then there is "add" button .on click that it generate the row.but I am getting "undefined".My I insert the model div inside the controller ? here is http://jsbin.com/vubojoxo/4/

Why I am getting this error ? XMLHttpRequest cannot load file:///C:/Users/asd/Desktop/angular/angularproject/dialog.html. Received an invalid response. Origin 'null' is therefore not allowed access.

I am getting this error when I used plunker..and run in my desktop .. I make this html ?

<!doctype html>
<html ng-app="plunker">
<head>
    <script src="angular.js"></script>
    <script src="ui-bootstrap-tpls-0.2.0.js"></script>
    <link href="bootstrap-combined.min.css" rel="stylesheet">

    <script src="index.js"></script>

</head>
<body>

<div ng-controller="DialogDemoCtrl">
    <a class="btn" data-toggle="modal" href="" ng-click="openPopupScreen()">Add Contend</a>
</div>

</body>
</html>

.... Dialog.html

<div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h1>Add Element</h1>
</div>
<div class="modal-body">
    <form >
        <label>Name:</label><input type="text" class="span3" ng-model="activeItem.name"></br>
        <label>Content Name:</label><input type="password" class="span3" ng-model="activeItem.content"></br>
        <button type="submit" class="btn btn-success" ng-click="addItem()">Add In List</button>
        <button type="reset" class="btn ">Clear</button>
    </form>
</div>
<div class="modal-footer">
    <a class="btn" data-dismiss="modal" aria-hidden="true">close</a>
</div>

js code:

var myApp = angular.module('plunker', ['ui.bootstrap']);

myApp.controller('DialogDemoCtrl',  function($scope,$dialog) {
    $scope.items = [];
    $scope.activeItem = {
        id:'',
        name: '',
        content: ''
    };

    $scope.addItem = function () {
        $scope.activeItem.id = $scope.items.length + 1;
        $scope.items.push($scope.activeItem);
        $scope.activeItem = {}; /* reset active item*/

    };

    $scope.getId = function (item) {
        alert('ID: '+item.id);

    };
    $scope.openPopupScreen = function () {
        alert('Check Open pop up screen');
        $dialog.dialog({}).open('dialog.html');

    };

});
share|improve this question

1 Answer 1

up vote 0 down vote accepted

Check this Plunker

In this example i used angular-ui library which wraps bootstrap's modal to angular based on this StackOverflow Answer

ModalDemoCtrl

  $scope.items = [];

  $scope.getId = function(item) {
    alert('ID: ' + item.id);

  };

  // This opens a Bootstrap modal
  $scope.open = function() {

    var modalInstance = $modal.open({
      template: $scope.modal_html_template,
      controller: ModalInstanceCtrl
    });

    modalInstance.result.then(function(newItem) {
      // On modal success

      newItem.id = $scope.items.length + 1;

      $scope.items.push(newItem);

    }, function() {
      // On modal cancelation
    });
  }

ModalInstanceCtrl

  $scope.name = '';
  $scope.content = '';

  $scope.ok = function() {

    var response = {
      'name': $scope.name,
      'content': $scope.content
    };

    $modalInstance.close(response);

  };

  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  };

HTML

 <body>

    <div ng-controller="ModalDemoCtrl">


      <div inner-html-bind="" inner-html="modal_html_template" class="hidden">
        <div class="modal-header">
          <h3>I'm a modal!</h3>
        </div>

        <div class="modal-body">

          <div class="form-group">
            <label>Name</label>

            <!-- using $parent because ui-bootstrap nested 2 controllers. this is a workaround -->
            <input type="text" class="form-control" ng-model="$parent.name" placeholder="Enter Name">
          </div>

          <div class="form-group">
            <label>Content</label>

            <!-- using $parent because ui-bootstrap nested 2 controllers. this is a workaround -->
            <input type="text" class="form-control" ng-model="$parent.content" placeholder="Enter Content">
          </div>

        </div>

        <div class="modal-footer">
          <button class="btn btn-primary" ng-click="ok()">OK</button>
          <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
      </div>

      <div class="container">
        <h2>Modal Example <a href="http://stackoverflow.com/questions/24988561">http://stackoverflow.com/questions/24988561</a></h2>
        <button class="btn" ng-click="open()">Open Modal</button>


        <div>

          <ul>
            <li ng-repeat="item in items">
              <a ng-click="getId(item)">{{ item.id }} | {{ item.name + ' ' + item.content  }}</a>
            </li>
          </ul>

        </div>
      </div>

    </div>
  </body>
share|improve this answer
    
Thanks for answering ..I need the same answer ..But I have 2 Question please check my update..of Question. –  Pallavi Sharma Jul 28 at 5:57
    
my first Question is why i am getting this error ..?please see update –  Pallavi Sharma Jul 28 at 6:01
    
second Question when I run your plunker it work great ..but when I download and run on browser it gives error why ? –  Pallavi Sharma Jul 28 at 6:03

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.