0

I'm editing a wikipage in SharePoint to be set up like a form. I have a input text that takes in a coach name. When clicking "Add Person" I want it to add this person to a list and then update my ng-repeat but only one or the other will work at a time when I take the other out (i.e. the ng-repeat displays the correct info or the ng-click works with a test alert I made).

Any help is appreciated. Is this possible to do what I'm trying to do? Please note I tried separating this into two different controllers as a workaround with no luck still so the code might look a little weird.

I'm using SharePoint Designer 2013. Code is below

///this will repeat the correct values but only when...
<h1>Coaches Attending</h1>
<div data-ng-app="app">
<ul  data-ng-controller="personController"> 
<li data-ng-repeat="person in people">{{person.name}}</li>
</ul>
</div>
</div>

////....this is taken out of code
<div data-ng-app="app"  data-ng-controller="AddPersonController">
 Enter Year:
<input type="text" data-ng-model="year">
<input type="text" data-ng-model="year">
<button data-ng-click='sendEmail()'>greet</button>
<hr>
{{year}}
<button ng-click='sendEmail()'>greet</button>
<br><br><br>
</div>

/////////////////////////////////
<script type="text/javascript">
'use strict';

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

"use strict";
var appControllers = angular.module('app', []);
appControllers.controller('personController', ['$scope', '$http', function ($scope, $http) {

alert("first controller");

$scope.people = 
[{name:'Bobby'},
 {name:'Adam'},
 {name:'Jivan'}];

alert("second controller");

$scope.sendEmail = function(){
    // $scope.year is undefined!!!!
    alert($scope.year)
}



}]).controller('AddPersonController', ['$scope', '$http', function($scope, $http){

alert("second controller");

$scope.sendEmail = function(){
    // $scope.year is undefined!!!!
    alert($scope.year)
}

}]);

</script>
0

The first problem I notice is that you are defining the app module twice and that will lead to problems as per this reference: https://docs.angularjs.org/error/$injector/unpr?p0=commonProvider%20%3C-%20common%20%3C-%20applauncher

Second you say the $scope.year variable is undefined and that is precisely because of the first reason above. This simply means that the Angular injector is unable to resolve the dependencies for the controller.

Refactor your code and you should be fine.

Baraka.

1

Why do you want to use two controllers and two apps?

Try this:

<!DOCTYPE html>
<html ng-app="App">

<head>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="angular.js@*" data-semver="2.0.0-alpha.26" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> 

<script>
var myApp = angular.module('App', []);

myApp.controller('personController', ['$scope', '$http', function($scope, $http) {

  $scope.people = [{
    name: 'Bobby'
  }, {
    name: 'Adam'
  }, {
    name: 'Jivan'
  }];

  $scope.sendEmail = function() {
    alert($scope.name + " " + $scope.year);
  };

  $scope.add = function() {
    $scope.people.push({name: $scope.name});
  };

}]);
</script>
</head>

<body>

<h1>Coaches Attending</h1>
<div data-ng-controller="personController">
<ul>
  <li data-ng-repeat="person in people">{{person.name}}</li>
</ul>

Name:
<input type="text" data-ng-model="name">
<br/> Year:
<input type="text" data-ng-model="year">

<br/>
<button ng-click='add()'>Add</button>
<button ng-click='sendEmail()'>greet</button>
<hr> Name:{{name}}
<br/> Year:{{year}}

</div>

</body>

</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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