Home

Angular UI Bootstrap: Opening the First Accordion with ng-repeat

The Problem:

I was using the accordion directive in Angular UI Bootstrap version 0.1.2. On the demo page, there's an example showing how to open the first accordion group by default:

<accordion-group heading="First Header" is-open="true"> </accordion-group>

This works well for static content but fails to operate as expected with dynamic content generated using ng-repeat. In other words, it does not work like this:

<accordion-group
  heading="{{group.title}}"
  ng-repeat="group in groups"
  is-open="true"
>
</accordion-group>

My Solution:

In the template, bind the is-open property of the accordion as follows:

<accordion-group
  heading="{{group.title}}"
  ng-repeat="group in groups"
  is-open="status.isItemOpen[$index]"
>
</accordion-group>

And in the controller:

$scope.groups = ["First Header", "Second Header", "Third Header"]
$scope.status = {
  isItemOpen: new Array($scope.groups.length),
  isFirstDisabled: false,
}
$scope.status.isItemOpen[0] = true

Change the value of the last line to false if you prefer the first accordion to be closed by default.

Let me know if this doesn't work for you. 😊

Angular UI Bootstrap: Opening the First Accordion with ng-repeat

The Problem:

Welcome to "Continuous Improvement," the podcast where we explore solutions to common programming problems and help you become a better developer. I'm your host, Victor. In today's episode, we'll be discussing a problem I recently encountered with the accordion directive in Angular UI Bootstrap and the solution I found to make it work with dynamic content. So let's dive in!

The problem arose when I was using the accordion directive in Angular UI Bootstrap version 0.1.2. On the demo page, you can see an example where the first accordion group is opened by default:

<accordion-group heading="First Header" is-open="true"> </accordion-group>

This worked perfectly fine for static content. However, when I tried to generate dynamic content using ng-repeat, it didn't behave as expected. The accordion didn't open as intended. Let me show you an example:

<accordion-group heading="{{group.title}}" ng-repeat="group in groups" is-open="true"> </accordion-group>

But don't worry, I've found a solution to this problem!

Instead of using a static value for is-open, we can bind it to a property in our controller. Here's what the updated template looks like:

<accordion-group heading="{{group.title}}" ng-repeat="group in groups" is-open="status.isItemOpen[$index]"> </accordion-group>

And in the controller, we define the groups and the status object which will hold the isItemOpen property:

$scope.groups = ['First Header', 'Second Header', 'Third Header'];
$scope.status = { isItemOpen: new Array($scope.groups.length), isFirstDisabled: false };
$scope.status.isItemOpen[0] = true;

By using $index, we can dynamically set the value of isItemOpen for each accordion group based on their index. In this example, the first accordion group will be opened by default.

[BREAK]

If you prefer the first accordion group to be closed by default, simply change the value of true to false in the last line of the code snippet.

So, with this solution, you can now have dynamic content in your accordion groups and control their initial state using the is-open property.

And that's a wrap for today's episode of "Continuous Improvement." I hope this solution helps you overcome the problem with the accordion directive in Angular UI Bootstrap. If you have any questions or need further clarification, feel free to reach out to me. Thanks for listening, and until next time, happy coding!

Angular UI Bootstrap：使用ng-repeat開啟第一個手風琴

問題：

我在使用Angular UI Bootstrap版本0.1.2的手風琴指令。在示例頁面上，有一個範例顯示如何默認開啟第一個手風琴組：

<accordion-group heading="First Header" is-open="true"> </accordion-group>

這對於靜態內容來說工作得很好，但是對於使用ng-repeat生成的動態內容來說，它無法如預期地操作。換句話說，它不能這樣工作：

<accordion-group
  heading="{{group.title}}"
  ng-repeat="group in groups"
  is-open="true"
>
</accordion-group>

我的解決方案：

在模板中，將手風琴的is-open屬性綁定如下：

<accordion-group
  heading="{{group.title}}"
  ng-repeat="group in groups"
  is-open="status.isItemOpen[$index]"
>
</accordion-group>

並在控制器中：

$scope.groups = ["First Header", "Second Header", "Third Header"]
$scope.status = {
  isItemOpen: new Array($scope.groups.length),
  isFirstDisabled: false,
}
$scope.status.isItemOpen[0] = true

如果你希望第一個手風琴默認為關閉，則將最後一行的值改為false。

如果這個解決方案對你沒有作用，請讓我知道。😊

Note on Ionic Framework: Android Platform in OS X

In this blog post, we will walk through several error messages that you might encounter when installing dependencies for the Android platform of the Ionic framework on Mac OS X. Follow this official guide to install Cordova and Ionic, and then create a project up until the step where you configure the platform.

To enable the Android platform, run the following command:

ionic platform add android

However, you may encounter this error:

Error: ANDROID_HOME is not set and "android" command not in your PATH.

Step 1: Download the Android SDK

Visit the Android developer website and download the stand-alone SDK Tools: https://developer.android.com/sdk/installing/index.html.

Step 2: Unzip the File

I unzipped the SDK to the path of my workspace:

/Users/Victor/Workspace/android-sdk-macosx

Step 3: Set the Android Command in Your PATH

Note: Replace "Victor" with your username. If you are using oh-my-zsh, replace the .bash_profile with your .zshrc profile.

1. Open your terminal and ensure that .bash_profile ends with a newline:

echo >> /Users/Victor/.bash_profile

1. Set the ANDROID_HOME environment variable in .bash_profile:

echo "export ANDROID_HOME=/Users/Victor/Workspace/android-sdk-macosx" >> /Users/Victor/.bash_profile

1. Update the PATH variable as well:

echo "export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools" >> /Users/Victor/.bash_profile

1. Reload the terminal to apply the changes:

. /Users/Victor/.bash_profile

Step 4: Install Android-19

Now, if you try to run:

ionic platform add android

You might see the following error:

Error: Please install Android target "android-19".

Run android from your command line to open the SDK manager:

android

Check the box for Android 4.4.2 (API 19) and then click "Install 8 packages…". Accept the license and keep your fingers crossed while waiting for the download process to complete.

Finally, try running the command again:

ionic platform add android

And voila:

Project successfully created.

If you encounter any issues, feel free to send me a help request. Cheers! ☺

Note on Ionic Framework: Android Platform in OS X

In this blog post, we will walk through several error messages that you might encounter when installing dependencies for the Android platform of the Ionic framework on Mac OS X. Follow this official guide to install Cordova and Ionic, and then create a project up until the step where you configure the platform.

Hello everyone and welcome to another episode of Continuous Improvement - your source for tips, tricks, and solutions to help you overcome hurdles in your development journey. I'm your host, Victor, and in today's episode, we will be discussing some common error messages that you might come across while installing dependencies for the Android platform of the Ionic framework on Mac OS X.

But before we dive into that, I want to remind you to check out our official guide at ionicframework.com/docs/guide/installation.html. It provides a step-by-step walkthrough for installing Cordova and Ionic, as well as creating a project up until the point where you configure the platform.

Alright, let's get started!

So, you've followed the official guide and reached the point where you need to enable the Android platform by running the command:

ionic platform add android

But hold on, you might encounter an error message that says:

Error: ANDROID_HOME is not set and "android" command not in your PATH.

What does this mean? Well, it simply means that the Android command is not recognized by your system because the necessary environment variables are not properly set. But fret not, I'm here to guide you through the process of resolving this.

Step 1 is to download the Android SDK. You can find the link to the Android developer website in our blog post at [link]. Once you're there, go ahead and download the stand-alone SDK Tools.

Step 2 involves unzipping the downloaded file. Make sure to choose a suitable location for the SDK. For me, I extracted it to my workspace directory at:

/Users/Victor/Workspace/android-sdk-macosx

But you can choose a different location if you prefer.

Now that we have the Android SDK set up, it's time for Step 3: setting the Android command in your PATH. This step is crucial for your system to recognize the Android command as a valid command. So, open your terminal and follow along.

First, let's make sure your .bash_profile ends with a newline:

echo >> /Users/Victor/.bash_profile

Next, we need to set the ANDROID_HOME environment variable in your .bash_profile file. This can be accomplished with the following command:

echo "export ANDROID_HOME=/Users/Victor/Workspace/android-sdk-macosx" >> /Users/Victor/.bash_profile

Remember to replace "Victor" with your own username.

In addition to the ANDROID_HOME variable, we also need to update the PATH variable. This ensures that your system knows where to find the Android tools and platform tools. Execute the following command:

echo "export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools" >> /Users/Victor/.bash_profile

Great, we're almost there! Now, in order to apply the changes we made to the .bash_profile file, we need to reload the terminal. You can do this by executing the command:

. /Users/Victor/.bash_profile

Phew, we've made it through Step 3! Now we're ready for Step 4, which involves installing Android-19. If you try running the command:

ionic platform add android

You might come across the following error message:

Error: Please install Android target "android-19".

To resolve this, we need to open the SDK manager by running the android command from your terminal:

android

Once the SDK manager is open, check the box for Android 4.4.2 (API 19) and click on "Install 8 packages…". Then, simply accept the license and patiently wait for the download process to complete.

Now, it's time to give it another shot! Run the command again:

ionic platform add android

And voila! Hopefully, you will see the reassuring message:

Project successfully created.

And there you have it, folks! You've successfully resolved the error messages that can occur while installing dependencies for the Android platform of the Ionic framework on Mac OS X. If you experience any issues throughout the process, don't hesitate to reach out to me via email at victorleungtw@gmail.com.

That wraps up another episode of Continuous Improvement. I hope you found this information helpful and that it saves you time and frustration in your development journey. Make sure to subscribe to our podcast for more valuable tips and solutions. Until next time, happy coding!

關於Ionic框架的註解：OS X中的Android平台

在這篇博客文章中，我們將一起研究你在Mac OS X上為Ionic框架的Android平台安裝依賴時可能遇到的幾種錯誤信息。請按照這個官方指南來安裝Cordova和Ionic，然後創建一個項目，直到你配置平台的步驟。

要啟用Android平台，請運行以下命令：

ionic platform add android

然而，你可能遇到這個錯誤：

Error: ANDROID_HOME is not set and "android" command not in your PATH.

步驟1：下載Android SDK

訪問 Android 開發者網站並下載獨立的 SDK 工具：https://developer.android.com/sdk/installing/index.html。

步驟2：解壓縮文件

我將SDK解壓縮到我的工作空間的路徑：

/Users/Victor/Workspace/android-sdk-macosx

步驟3：在您的PATH中設置Android命令

注意：將"Victor"替換成您的用戶名。如果您使用的是oh-my-zsh，請將.bash_profile替換成您的.zshrc配置文件。

1. 打開您的終端並確保 .bash_profile 以一個新行結束：

echo >> /Users/Victor/.bash_profile

1. 在 .bash_profile中設置 ANDROID_HOME 環境變量：

echo "export ANDROID_HOME=/Users/Victor/Workspace/android-sdk-macosx" >> /Users/Victor/.bash_profile

1. 也更新PATH變量：

echo "export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools" >> /Users/Victor/.bash_profile

1. 重載終端以應用更改：

. /Users/Victor/.bash_profile

步驟4：安裝Android-19

現在，如果您嘗試運行：

ionic platform add android

您可能會看到以下的錯誤：

Error: Please install Android target "android-19".

從命令行運行 android 打開SDK管理器：

android

勾選 Android 4.4.2 (API 19)，然後點擊 "Install 8 packages…”。接受授權並等待下載過程完成。

最後，再次嘗試運行命令：

ionic platform add android

然後就成功了：

Project successfully created.

如果您遇到任何問題，請隨時向我發送幫助請求。幹杯！☺

Configure CircleCI with Karma Test

The Problem

I was setting up continuous integration using CircleCI and Karma tests for Angular on Heroku.

The tests were working on my local host, but Karma was not found on CircleCI:

Uh-oh, some tests have failed!
Failing command: npm test
Exit code: 1
Output:
> karma start karma.conf.js

sh: 1: karma: not found
npm ERR! Test failed. See above for more details.
((npm :test)) returned exit code 1

My Solution

To resolve this issue, either create or edit your circle.yml config file. Add dependencies using npm to install karma-cli globally, and use Bower to install Angular, as shown below:

dependencies:
  pre:
    - npm install -g karma-cli bower
    - bower install
  cache_directories:
    - ~/nvm

This configuration should help you run your Karma tests successfully on CircleCI.

Configure CircleCI with Karma Test

Welcome to "Continuous Improvement," the podcast where we discuss solutions to common programming and development challenges. I'm your host, Victor. Today, we're going to delve into an issue that many developers face when setting up continuous integration with CircleCI and Karma tests for Angular on Heroku.

So, picture this: you've been working hard on your Angular project, and you're ready to set up continuous integration to ensure that your code is always tested and deployed smoothly. You choose CircleCI as your CI/CD platform because of its popularity and great features. You follow all the necessary steps, configure your build process, and run your tests locally. Everything seems to be working fine until you push your code to CircleCI. Suddenly, your tests fail, and you're left scratching your head.

Let me paint you a clearer picture. The error message you see on CircleCI says, "Uh-oh, some tests have failed! Failing command: npm test. Exit code: 1. Output: > karma start karma.conf.js. sh: 1: karma: not found. npm ERR! Test failed. See above for more details." Frustrating, isn't it?

But fear not, my friends! I have a solution for you. After spending some time digging through forums and consulting the documentation, I found a way to resolve this issue.

To get Karma to work on CircleCI, you'll need to make a small tweak to your CircleCI configuration file, commonly referred to as the circle.yml file. This file specifies the build process and dependencies required for your project.

Here's what you need to do: open your circle.yml file and add the following lines of code:

dependencies:
  pre:
    - npm install -g karma-cli
  cache_directories:
    - ~/.npm

By adding these lines, you're instructing CircleCI to install karma-cli globally before running your tests. This ensures that the karma command is available and avoids the dreaded "karma not found" error. Additionally, the cache_directories line ensures that npm dependencies are cached for faster builds.

Once you make these changes and push your code to CircleCI, you should see your tests running successfully, without any errors. And that's it! You've conquered this challenge and brought continuous integration to your Angular project seamlessly.

Thanks for tuning in to this episode of "Continuous Improvement." I hope you found the solution to the CircleCI and Karma issue helpful. Remember, as developers, we encounter problems all the time, but it's through continuous learning and improvement that we grow. Join me next time as we explore more programming challenges and their solutions.

將CircleCI與Karma測試配置

問題

我正在設置使用CircleCI和Karma測試的Angular在Heroku上的持續集成。

![] (./2014-12-22.png)

測試在我的本地主機上可以運行，但在CircleCI上找不到Karma：

噢哦，有些測試沒有通過！
失敗的命令：npm測試
退出代碼：1
輸出：
>啟動 karma karma.conf.js

sh：1：karma：找不到
npm ERR！測試失敗。有關詳細信息，請參見上文。
（（npm：test））返回退出代碼1

我的解決方案

要解決這個問題，您可以創建或編輯 circle.yml 配置文件。使用npm添加依賴以全局安裝 karma-cli，並使用Bower安裝Angular，如下所示：

dependencies:
   pre:
     - npm install -g karma-cli bower
     - bower安裝
   cache_directories:
     - ~/nvm

此配置應該可以幫助您在CircleCI上成功運行您的Karma測試。

How to Upload Files with Meteor.js?

NOTE: This tutorial uses Meteor 1.1.3 with cfs:standard-package 0.0.2 as of December 15, 2014. Since this feature is under active development, it may have changed by the time you read this. Feel free to contact me if you have any questions. :)

The Problem

Last week, a friend of mine asked me how to handle file uploads in a Meteor project. I recommended he use Collection FS, and he followed the README.md instructions on their repository. The file upload feature worked fine on localhost but failed once deployed to the free Meteor testing server. In fact, the server would keep refreshing and wouldn't even load a page.

My Explanation

This issue arises because FS.filesystem uploads the image to a public folder directory. Due to security concerns, this is not allowed by the server unless properly configured. A workaround is to use GridFS as a storage adapter to insert images into MongoDB.

My Solution

Installation

First, instead of using cfs:filesystem, use cfs:gridfs for your package.

    meteor add cfs:standard-packages
    meteor add cfs:gridfs

Syntax

Next, when declaring your collection, switch from using FS.Collection to FS.Store.GridFS.

var imageStore = new FS.Store.GridFS("images")

Images = new FS.Collection("images", {
  stores: [imageStore],
})

Permissions

Then, set up 'deny' and 'allow' rules based on your needs.

Images.deny({
  insert: function () {
    return false
  },
  update:
  created: function () {
    return false
  },
  remove: function () {
    return false
  },
  download: function () {
    return false
  },
})

Images.allow({
  insert: function () {
    return true
  },
  update:
  created: function () {
    return true
  },
  remove: function () {
    return true
  },
  download: function () {
    return true
  },
})

User Interface

Add a file input button in your client template for users to click.

<input type="file" name="..." class="myFileInput" />

Handle the event as follows:

Template.Profile.events({
  "change .myFileInput": function (event, template) {
    FS.Utility.eachFile(event, function (file) {
      Images.insert(file, function (err, fileObj) {
        if (err) {
          // handle error
        } else {
          // handle success depending on your needs
          var userId = Meteor.userId()
          var imagesURL = {
            "profile.image": "/cfs/files/images/" + fileObj._id,
          }
          Meteor.users.update(userId, { $set: imagesURL })
        }
      })
    })
  },
})

Publication/Subscription

Lastly, don't forget to set up publication and subscription in case you've removed the autopublish package.

Meteor.publish("images", function () {
  return Images.find()
})

Subscribe to it in your iron:router:

Router.route("/profile", {
  waitOn: function () {
    return Meteor.subscribe("images")
  },
  action: function () {
    if (this.ready()) this.render("Profile")
    else this.render("Loading")
  },
})

I hope this solution works for you. If you're using an Amazon S3 bucket, consider using cfs:s3 as the adapter. If all else fails, Filepicker could serve as an alternative approach for handling file uploads. For more information, visit Filepicker's website.