如何在我的angularjs应用程序中使用jsfiddle代码

时间:2017-12-27 05:27:58

标签: javascript angularjs angularjs-ng-repeat dynamic-tables

我必须在我的应用程序中使用此jsfiddle code,因为我要在one.html company.html中输入所有代码,它只显示此output而不是output }。有人可以解释一下,为什么会出现这个问题,我认为问题出在这个

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

app.controller('MainCtrl', function($scope) {

$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];

$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};

$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};

});

关于模块名称或类型。 我在浏览器控制台中收到此错误: enter image description here

1 个答案:

答案 0 :(得分:1)

由于您的Immediately Invoked Function Expression,您收到了错误消息。你必须改变它如下:



/* ------------------------------------------------------- 

* Filename:     Adding Form Fields Dynamically
* Website:      http://www.shanidkv.com
* Description:  Shanidkv AngularJS blog
* Author:       Muhammed Shanid shanidkannur@gmail.com

---------------------------------------------------------*/

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

app.controller('MainCtrl', function($scope) {

  $scope.choices = [{
    id: 'choice1'
  }, {
    id: 'choice2'
  }];

  $scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length + 1;
    $scope.choices.push({
      'id': 'choice' + newItemNo
    });
  };

  $scope.removeChoice = function() {
    var lastItem = $scope.choices.length - 1;
    $scope.choices.splice(lastItem);
  };

})(angularjs-starter);

fieldset {
  background: #FCFCFC;
  padding: 16px;
  border: 1px solid #D5D5D5;
}

.addfields {
  margin: 10px 0;
}

#choicesDisplay {
  padding: 10px;
  background: rgb(227, 250, 227);
  border: 1px solid rgb(171, 239, 171);
  color: rgb(9, 56, 9);
}

.remove {
  background: #C76868;
  color: #FFF;
  font-weight: bold;
  font-size: 21px;
  border: 0;
  cursor: pointer;
  display: inline-block;
  padding: 4px 9px;
  vertical-align: top;
  line-height: 100%;
}

input[type="text"],
select {
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
  <fieldset data-ng-repeat="choice in choices">
    <select>
         <option>Mobile</option>
         <option>Office</option>
         <option>Home</option>
      </select>
    <input type="text" ng-model="choice.name" name="" placeholder="Enter mobile number">
    <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
  </fieldset>
  <button class="addfields" ng-click="addNewChoice()">Add fields</button>

  <div id="choicesDisplay" style="visibility:hidden;">
  </div>
</div>
&#13;
&#13;
&#13;

  

如果您需要选择显示,请告诉我。将添加   那!只需复制代码就可以了。确保CSS   part位于样式标记内,而Angular位于Script标记内。

快乐编码:)