Error: $compile:ctreq
Missing Required Controller
Controller 'ngModel', required by directive 'ngChange', can't be found!
sample code
//create dynamic UI
var targetQDom = '<div id="' + item.id + '" style="width=100%;background: white;" ><div class="head" style="border-bottom-color: azure;border-bottom-style: double;"><a style="color:aliceblue"><i class="fa fa-times-circle-o fa-fw fa-2x bt-right" style="margin-top: -4px;" ng-change="removeR(' + item.id + ',' + (index + 1) + ',$event)"></i></a> <a style="color:white;" data-toggle="collapse" class="collapsed" data-target="#' + item.id + '-rule-' + (index + 1) + '" ng-change="targetqClick(' + item.od + ',' + (index + 1) + ',' + item.req + ')" >' + item.text + '</a></div></div>';
var $targetQDom = window.j$(targetQDom).appendTo('#appendRules');
$compile($targetQDom)($scope);
the above code will be there in the controller.
above code is dynamically creating HTML based on model data.
after running app I am getting the above error in console and it not creating UI.
If I user using the ng-click the above code works fine.
other issues with MAC OS Google chrome
but ng-click has issued in MAC OS google chrome drop-down change not working.
. If I try to change drop down value it's not triggered.so the target drop-down value is not changing.
I tried to replicate it and found some error on your code. check with this.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div id="someid" style="float: left;">
<select id="some-condition-list" class="some-control cursor_Hand"
ng-model="selectedsome" ng-change="somechange(someindex,$event)" >
<option value="">Show All</option>
<option ng-repeat="some in somes.condtions " value="{{some.Id}}">{{some.name}}
</option>
</select>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.some="Hey";
$scope.somes ={};
$scope.somes.condtions =[];
$scope.somes.condtions =[{'Id':'1', 'name':"Gayani"},{'Id':'2',
'name':"Chaminda"}];
$scope.selectedsome="HI";
$scope.someindex=1;
$scope.somechange = function(item, item1){
alert(item);
}
}]);
</script>
</body>
Related
I am new to AngularJS. This is my first Plunker.
I am trying to make it so that if a user clicks on a link in a section, the value of the link appears in the results. The other two results should be cleared of their values.
I can't find any documentation on how to reference specific items in a class by index. In jQuery, I would normally do something like...
// get this index of the thing that was clicked
$this = $(this),
Idx = $BUTTONS.BigButtons.index($this),
ThisButton.eq(Idx).doSomething();
<body ng-controller="MainController as main">
<div class="title" ng-repeat="i in [1,2,3]">
<p>This is section {{i}}</p>
<ul>
<li ng-repeat="j in [1,2,3]">
section {{i}} - link {{j}}</li>
</ul>
<div class="results" ng-bind="main.results"></div>
</div>
</body>
var app = angular.module('controllerAsDemo', []);
app.controller('MainController', function() {
this.results = "Lame default";
this.displayContent = function(firstIdx, secondIdx) {
this.results = "populate section "
+ firstIdx
+ " with the number "
+ secondIdx
+ " - other two results should be empty"
;
};
});
Here is the Demo
I think you should not be looking at classes to achieve what you want. Angular repeat and various other directives give you the ability to do that.
I have touched your code a little and it works now. See below.
var app = angular.module('controllerAsDemo', []);
app.controller('MainController', function($scope) {
$scope.name = 'Cool Clicking';
$scope.results = [];
$scope.displayContent = function(firstIdx, secondIdx) {
$scope.results = [];
$scope.results[firstIdx] = "populate results "
+ firstIdx
+ " with the number "
+ secondIdx
+ " - other two results should be empty"
;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="controllerAsDemo" ng-controller="MainController as main">
<p>{{main.name}}!</p>
<!-- LOOP THROUGH A GALLERY THEME -->
<div class="title" ng-repeat="i in [1,2,3]">
<p>This is section {{i}}</p>
<ul>
<li ng-repeat="j in [1,2,3]">
section {{i}} - link {{j}}
</li>
</ul>
<div class="results" ng-bind="results[i]"></div>
</div>
</body>
That said, if you want to use jQuery in Angular then you simply can.
I will suggest you read about Angular Dom Manipulation here
Another approach can be seen in this plunkr where each item in the gallery has his result.
I have the following API URL (https://my.ncarb.org/Public/api/certification/search?pageSize=100&page=0&lastName=&firstName=&city=&stateCode=&countryCode=&orderBy=name) and I want to query it (not in memory) and return just one of the results using a form with filters.
This is what I have so far but it is all done in memory and not querying the API directly to get the results where "stateCode" is equal to 'DC'
<body>
<div ng-form="" ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr><td>Filter by First Name:</td><td> <input type="text" ng-model="search.firstName"></td></tr>
<tr><td>Filter by Last Name:</td><td> <input type="text" ng-model="search.lastName"></td></tr>
<tr><td>Filter by City:</td><td> <input type="text" ng-model="search.city"></td></tr>
<tr><td>Filter by State Code:</td><td> <input type="text" ng-model="search.stateCode"></td></tr>
</table>
<hr />
<ul>
<li ng-repeat="x in names | filter:search">
{{ x.firstName + ' ' + x.lastName + ' - ' + x.city + ', ' + x.stateCode }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http) {
$http.get("https://my.ncarb.org/Public/api/certification/search?pageSize=100&page=0&lastName=&firstName=&city=&stateCode=&countryCode=&orderBy=name")
.success(function (response) { $scope.names = response.data; });
});
</script>
Any help would be greatly appreciated to help me with this solution. If you can provide something using JSFiddle, that would be awesome!
I was able to craft a solution based on the params advice. I also referenced this thread and built a solution based on one of the answers here: [Build query string from parameters object
This seems like it should be a simple problem but it's turning out to be a lot more involved that I initially thought.
I have a couple of items inside my Angular Foundation Popover directive that i would like to separate with a line break.
.div{ 'popover' => "Name: {{ user.name }} /br Age: {{ user.age }}", 'popover-trigger' => 'click' }
What is the solution to adding a line break where the /br is in this line of html?
This is quite tricky. If you are using angular-foundation (and I realy recommand to use it), you can modify the official popover template to be HTML unsafe - than you can use HTML in popovers:
JS
"use strict";
// app definition - don't forget to include angular-foundation module
angular.module("app", ["mm.foundation"]);
// just o controller, nothing special
angular
.module("app")
.controller("MainController", MainController);
function MainController() {
var vm = this;
vm.name = "John Doe"
vm.email = "john.doe#example.com"
}
// unsafe filter - this is used in the template below
angular
.module("app")
.filter("unsafe", unsafe)
function unsafe($sce) {
return function (val) {
return $sce.trustAsHtml(val);
};
};
// oficial popover template modification
angular
.module("template/popover/popover.html", [])
.run(["$templateCache", function($templateCache) {
$templateCache.put("template/popover/popover.html",
"<div class=\"joyride-tip-guide\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
" <span class=\"joyride-nub\" ng-class=\"{\n" +
" bottom: placement === 'top',\n" +
" left: placement === 'right',\n" +
" right: placement === 'left',\n" +
" top: placement === 'bottom'\n" +
" }\"></span>\n" +
" <div class=\"joyride-content-wrapper\">\n" +
" <h4 ng-bind-html=\"title | unsafe\" ng-show=\"title\"></h4>\n" +
" <p ng-bind-html=\"content | unsafe\"></p>\n" +
" </div>\n" +
"</div>\n" +
"");
}]);
HTML
<main ng-app="app" ng-controller="MainController as vm">
<div class="row">
<div class="small-12 column">
<div popover="{{vm.name + '<br />' + vm.email}}" popover-trigger="mouseenter">
<h1>Hover me!</h1>
</div>
</div>
</div>
</main>
Here you are working CodePen example.
You can also make your own directive to have both HTML safe popovers and HTML unsafe popovers - or you can use tooltip insetead which has support for HTML unsafe by default (directive tooltip-html-unsafe).
I would like to create a directive, that does not need ngRepeat, because there is some additional functionality on the directive, that doesn't play good with ngRrepeat.
This is my directive with ng-repeat:
<div>
<ul>
<li ng-repeat="item in items track by $index" ng-class="attrs.itemTheme" data-item="{{ item[attrs.itemId]}}">
<div ng-include="attrs.tpl"></div>
</li>
</ul>
</div>
attrs.tpl, nt-dimension is another directive, that uses the items values from ngRepeat:
<script type="text/ng-template" id="dimension-item-tpl.html">
<div nt-dimension x-attrs="item"></div>
</script>
Without ngRepeat:
<div>
<ul></ul>
</div>
Can some please give me an example, I am quit struggling with this.
Example of code:
http://jsfiddle.net/mato75/4zhLtjbw/
Not working example:
http://jsfiddle.net/mato75/ztLhpf2g/
Got to compile and append the ngIncluded template, but the problem is, that it compiles only the last one, because the digest cycle is to slow.
var el = jqElm.find('ul');
scope.attrs.list.forEach(function (vl) {
var tmp =
'<li class="' + attrs.itemTheme + '" data-item="' + vl.id + '">' +
'<div ng-include="\'' + attrs.itemTpl + '\'"></div>' +
'</li>';
scope.item = vl; // this is to slow :(
var b = $compile(tmp)(scope);
el.append(b);
});
You need to manually create an own scope for each li, so each item has its own data.
var ul = jqElm.find('ul');
scope.list.forEach(function (vl) {
var li = '<li><div ng-include="\'item-tpl2.html\'"></div></li>';
var newScope = scope.$new();
newScope.item = vl;
var cLi = $compile(li)(newScope);
ul.append(cLi);
I am trying to get HTML to compile in a growl alert. Here is my code:
var html = '<h3>' + rejection.config.method + ' '+ rejection.config.url + '</h3>' +
'<hr><div>' +
(_.isObject(rejection.data) ? ('<pre>' + JSON.stringify(rejection.data, null, 2) + '</pre>') : rejection.data) +
'</div>' + '<a ng-click="reportError($event)"><i class="fa fa-bullhorn hoverable"></i> Report this error</a>';
growl.addErrorMessage(html,
{
enableHtml: true
});
$compile(html)($scope);
On the page the HTML looks like:
<div ng-bind-html="message.text" ng-switch-when="true" class="ng-scope ng-binding"><h3>GET services/link</h3><hr><div>null</div><a><i class="fa fa-bullhorn hoverable"></i> Report this error</a></div>
The html should have the directive that I appended: "<a ng-click="reportError($event)" and it is not being added. Any ideas?