Hi, I am still somewhat new to Angular, and I am having trouble with a few issues on an Angular 1.6 application that I am working on to teach myself Angular.
Here is a link to what I have so far : http://www.inspired-evolution.com/Sandbox/Angular/Angular_App/ I am using Bootstrap and I have set up a block to display when a new DVD id added and one to display when you already have the DVD in Que. These work ok, but I only want the alert-danger and alert-success classes to display when the event has occurred. Right now the background displays all the time. Another addition I want to add is a message that displays when an item in the list is deleted. I am pretty sure I can use ng-if or ng-show to accomplish these but I am a little stumped as to what logic to put in for these to work. Hopefully, someone can help direct me. If I need to clarify anything as far as what I am trying to accomplish. let me know also. Here is the code: HTML <div class="InnerContainer"> <div id="DVDApp" ng-app="myDVDList" ng-cloak ng-controller="myController"> <div ng-if="addTitle !== ''"> <div class="alert alert-success"> <p>{{AddSuccess + " " + addTitle}}</p> </div> </div><!--end ng-if--> <ul class="DVDList"> <li ng-repeat="x in DVD" class="fadeMe">{{x}} <span ng-click="removeItem($index)" class="X-Out pull-right">X</span></li> </ul> <div class="form-group"> <label class="sr-only" for="DVD Title">Enter DVD Title:</label> <input type="text" class="form-control input-lg" id="inputlg" placeholder="Enter a DVD title here" ng-model="addTitle"> </div><!--end form group--> <span ng-show="addTitle !== ' ' "> <p class="alert alert-danger">{{errortext}}</p> </span> <button class="btn-add pull-right" ng-click="addItem()">Add DVD</button> </div><!--end DVD App--> </div><!--end inner container-->. Angular JS var app = angular.module("myDVDList", ['ngAnimate']) app.controller("myController", function($scope) { $scope.DVD = ["Suicide Squad", "Game of Thrones", "Finding Dory","House of Cards"]; $scope.addItem = function () { $scope.errortext = ""; $scope.AddSuccess = ""; $scope.RemoveSuccess = ""; $scope.addTitle = ""; if (!$scope.addTitle) {return;} if ($scope.DVD.indexOf($scope.addTitle) == -1) { $scope.DVD.push($scope.addTitle); } else { $scope.errortext = "This DVD is already in your Que! Please enter another title."; } if($scope.addTitle){ $scope.AddSuccess = "You have successfully added the DVD title:"; } } $scope.removeItem = function (x) { $scope.errortext = ""; $scope.remove = ""; $scope.DVD.splice(x, 1); } if($scope.removeItem){ $scope.RemoveSuccess = "You have successfully removed the DVD title"; } }); Enter code here... -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
