Sharepoint with AngularJS Ng-repeat and ng-onclick

Question

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>

Baraka · Accepted Answer · 2015-11-03 10:55:25Z

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.

answered Nov 3, 2015 at 10:55

Baraka

162 bronze badges

Add a comment |

Nattanan Schorer · Accepted Answer · 2015-07-10 15:51:27Z

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="[email protected]" 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>

Stack Exchange Network

Sharepoint with AngularJS Ng-repeat and ng-onclick

2 Answers 2

Your Answer

Hot Network Questions

Sharepoint with AngularJS Ng-repeat and ng-onclick

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions