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

Question

我必须使用这个 jsfiddle code在我的应用程序中，因为我要在一个页面 company.html 中输入所有代码，它只显示这个 而不是这个 .谁能解释一下为什么会出现这个问题，我认为问题出在这个

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);
};

});

关于模块名称或类似的。我在浏览器控制台中收到此错误:

Answer 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>

If you Need the choices display to come up just let me know. Will add that! Just copy the code and you are good to go. Make sure the CSS part is inside your style tag while Angular inside your Script tag.

快乐编码:)